[catwingz]

Hi Skandha,

This CSS doesn’t solve the problem, but by experimenting with it and other parameters it is becoming clear that “.custom-header-content” appears to control the tinted overlay of the image, and not the image itself.

This needs to be improved upon, but in a jumpy way is solving the size issue with the image:

 @media screen and (max-width: 450px){.custom-header-media img,.header-media,.wrapper {
                /*padding:100px 0px;*/
height: 60% !important;
	 }}
 
@media screen and (max-width:767px){.custom-header-media img,.header-media,.wrapper {
height: 60% !important;
	 }}

However, while it fixes the image, it also results in a large black band beneath the banner image. I could live with my jumpy code if you can tell me how to get rid of the black band.

I tried adding the .custom-heder-content.sections.header.media.section selector to this but it didn’t work.

Thank you

[catwingz]

Hi Skandha,

No, this doesn’t solve anything. Without that CSS the image goes back to being giant on desktop. Also, as I reported previously, on mobile both my image and the stock one for the theme appear squashed horizontally with or without the code.

Before the theme update my image looked fine with the code, but now it’s too short.

I may have solved the desktop issue by changing the CSS to

.custom-header-content{
        padding:150px 0 !important;
}

However, it doesn’t help mobile, and everyone is going to have problems with this. I hope someone there can figure out a solution and update the theme.

Thank you

[catwingz]

Hi again,

It appears that the theme update also included a change to the intended dimensions of the banner. When I restored my code and image it is now also being cropped vertically—much narrower than before. This is a step backwards. I hope this can be resolved soon.

Thank you

[catwingz]

Hi Skandha,

First, I am happy to report that the theme update fixed the problem with the header media title and text.

The CSS was an improvement, but still not quite there. Now the banner image is reduced to mobile dimensions but, instead of shrinking the image, it is instead squashed horizontally.

I experimented and commented out the

.custom-header-content{
	padding:112px 30px !important;
}

and restored the stock image. I discovered that it is squashed in mobile as well, so this is a flaw in the theme and will affect everyone who uses it. Help!

[catwingz]

Hi Skandha,

This doesn’t make any sense. My banner image is smaller than the stock one that comes with the theme.
Stock: 1920px x 822px
Mine 1920px x 573px
Both are 72 ppi.

This all started because we wanted it to take up less room on the page. I used the code you suggested and ended up keeping the padding figure the same. Surely there is a better solution to this situation.

Thank you

[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

[Author]

Posts