[catwingz]

Hi Skandha,

I don’t know how I missed this before, but now the banner image stays full-sized in mobile. What should I add to restore responsiveness?

Also, I’d like to be able to launch it soon. Are you able to tell me when the theme will update to fix the text issue in the banner?

Thank you

[catwingz]

Hi Skandha,

I added the CSS and deleted the text I had put in to keep the banner visible—and the banner disappeared again. What next?

Thank you

[catwingz]

Hi Skandha,

That was a huge step in the right direction. I modified it to `#page {
border-image-source: url(“https://dynamictherapies.net/wp-content/uploads/2019/02/vineBorder.png”);
border-image-repeat: round;
border-image-slice: 15;
border-image-width: 18px;
}`
changing the figure for slice. The top and bottom are the only parts which are as intended, but after further experimentation the 15 seemed to be the closest it could get—still choppy.

Then I decided to revisit background-image and tried this:

#page {
	background-image: url("https://dynamictherapies.net/wp-content/uploads/2019/02/vineBorder.png");
  background-repeat: repeat-y;
}

which does exactly what I had hoped to accomplish. Thank you very much for your help with this!

[catwingz]

Hi Skandha,

This was great progress and led me to realize there is a second problem.

I adjusted the code to `.custom-header-content{
padding:112px 40px !important;
}
`
to allow the full width of the image to show. Then I moved onto removing the Header Media Title & Text because they aren’t needed. The problem with this is when there is no text in those Customizer fields the banner doesn’t show either. Is there CSS to compensate for this?

Thank you!

[catwingz]

I’ve put it back up. A giant middle with both sides out of view. Thank you

[catwingz]

Hi Skandha,

I tried it but the image doesn’t appear. I feel like if it could at least display that it would be easier to get a handle on the repeat, etc.

Thank you

[catwingz]

Hi Skandha,

No, I mean the background image for the page. In the customizer there is a place provided to upload one. No dimensions are suggested, and I know this can get crazy.

thank you

[catwingz]

Hi Skandha,

My apologies— over the weekend she decided to reinstate the text title and relocate the logo to the banner where it can be as large as she wants it to be. Stay tuned for the next thread…

Thank you

[catwingz]

Oops. This is what I get for borrowing code from another site. I am still trying to solve the new mobile issue, but including the last addition this is the full roster of changes so far:
`/* To make the logo larger */

@media screen and (min-width:480px) {
.custom-logo {
max-width:360px;
}
}
/* To remove Search Field */
#search-container {
display:none;
}
#header-content {
padding-bottom:100px;
}
/* mobile logo */

@media screen and (max-width: 360px) {
#header-content {
padding:10px;
}
}

[catwingz]

Hi Skandha,

It looks like I was on the right track but didn’t tae it far enough. To get the logo where I wanted it for desktop it needed to be

#header-content {
        padding-bottom:100px;
}

That said, now I have created a problem for myself as this leaves too much space for tablets and phones. I tried this (and with different browsers) but it doesn’t seem to make a difference:

/* mobile logo */
@media screen and (max-width: 360px) {
  #branding img {
    padding-bottom:10px;
  }
}

What am I missing?

Thank you!

[catwingz]

Hi Skandha,

The logo is much better. However, now the navigation bar is riding on top of it. I don’t see anything in the CSS about the positioning of the navigation. What’s my next step?

Thank you!

[catwingz]

Hi,

The other thing I would like to do is to remove or replace the search field. We don’t foresee a need for search, but if a phone number were there it would make a lot more sense. Is this doable?

Thank you

[catwingz]

Hi Skandha,

This solved the centering issue, but I would still like to be able to make the logo larger. I tried enlarging the max-width but this didn’t make a difference. Making the top margin smaller will probably be called for to compensate. How can I fix this?

Thank you

[catwingz]

Hi Skandha,

This has been sitting for awhile so I thought I should let you know I am back to it. I am setting up a clone to do some experimenting and will see if I can make any progress with it. It still doesn’t make any sense to me that Google and my phone (now a different one from before) show completely different views of the website.

[catwingz]

Hi Skandha,

This is so strange. I disabled the popup plugin and it makes no difference to the test results. The image in their test does not match what I see using my phone. They show the banner image blown up so only a piece shows in the phone screen. On my phone it is reduced to the width of the phone screen. They show text links for navigation. On my phone I see the menu which appears when the menu icon is clicked.

Yost and google are supposed to be authorities, but being unable to experience what Google is complaining about makes it very tempting to ignore them. Any suggestions?

Thank you

[catwingz]

Hi Skandha,
I am back to this. This link may be dependent on some login but, in case it doesn’t, here is what I am seeing: results

1) There have been no modifications to the navigation. It is odd because the navigation in their screenshot isn’t what shows on my phone. Since everything else goes into columns it’s still the top candidate.

2) The home page is the only page with a banner image option in the page editor. The image in the media library is 1920×800 pixels. I don’t remember where I found the specifications for this image size, and this banner isn’t mentioned in the theme instructions. Should it be a different size?

[catwingz]

Hi Skandha,

I am still hoping there is a solution for the sidebar. Is what I am trying to achieve possible?

Thank you

[catwingz]

Hi Skandha,

No, that’s not what I’m looking for. I want the whole sidebar column to have the dark blue background, extending from the bottom of the banner down to the supplemental footer. It needs to be able to work with the pages with short content as well as the ones with very tall content, ideally with no white gap at either the top or the bottom. Is this possible?

Thank you

[catwingz]

Hi Skandha,

This is a great help. The only piece that is still unresolved is the background for the sidebar. I would like the whole sidebar to have a dark blue background from banner to footer. Right now it’s just the text wideget which looks terrible on the taller pages. I tried
main#main.site-main { background-color:#0992550; }
but it had no effect.

What am I missing?

Thank you!

[catwingz]

Hi Skandha,

If the site title is left blank will this have any effect on the SEO? I’ve always thought that it would still stay in the code even if the CSS sets the display to none. Either way, how can I style the font of the site description and reposition it, moving it down and to the right?

The search field is now gone. 🙂

I am wondering if what I had in mind for the background image is even possible for this site. If you go to old site you can see what I was going to do. In this site the content is flanked by the background image on both sides. This is an old theme which is not responsive and no longer supported. I added the file to the development site but it is only visible off to the sides of the banner, and not off to the sides of the main content. This is how I changed the code:

body {
background:url("http://77.104.136.172/~bluepla9/wp-content/uploads/2018/05/bg-gradient-1200.png") repeat fixed;
}

This code `.site-content {
padding:0;
border-top:20px solid #092550;
border-bottom:20px solid #092550;}`
creates stripes across the entire width of the content area at the bottom of the banner and the top of the footer. It needs to be associated with the sidebar because there is still a white gap at the top and bottom of the sidebar. I am leaving it in the code for now, but it’s not the solution.

I have changed the background color of the supplementary footer and removed the top border. I would still like to remove the white line between supplementary and the footer. It doesn’t respond to my attempts to remove or change the border color. What am I missing?

Regarding the supplementary footer, I may only be placing text in one of the widget areas. How can I make it a shorter, narrower band? I was able to remove the top padding but can’t find what is controlling the rest.
Thank you.

[Author]

Posts