.inside header padding-bottom on mobile

Hi there,

do you want to keep that Header Image 100% visible on all screen sizes?
If so, i would:

1. Edit the Customizer > Background Image -> Header and set its Size to cover
2. Remove the CSS you have added so far.
4. Edit the Customizer > Layout Header, and remove the top and bottom padding.
5. Add this CSS:

.site-header {
    min-height: 19vw;
}
@media(max-width: 768px) {
    .site-header {
        min-height: 29vw;
    }
}

So to explain, i checked your original background image, and divided its height / width * 100.
ie. 276px / 1457px * 100 = 19%

This gave me the % aspect ratio of the image.
We can use that like so:

.site-header {
    min-height: 19vw;
}

Where we set the min-height to 19 percent of the viewport width.

Then the next CSS just zooms in a bit more by adjusting that aspect ratio to a less landscape view..

This method keeps the image size responsive.

Hi David - thank you, I also applied a margin-bottom. That all worked however the 2 product images that are par of the header banner are cut off on the mobile, when applying your suggested changes.

I've added a screenshot displaying what I would like the header image to look like on mobile (as it was before)

I'm not sure how or where to adjust the size slightly smaller. Please help.

Thank you

Hi Cynthia,

In Appearance > Customize > Layout > Header, can you remove the top and bottom padding, and see how it goes?

Hi Fernando, it appeared to make a difference on the customizer mobile view, but when publishing the mobile view on my actually phone did not change at all. I even purged cache on site and cleared browser cache on phone and still didn't change.

Any other suggestions?

I can still see the padding from my end. To confirm, were you able to change the view to mobile while editing the top and bottom padding?

Example: https://share.getcloudapp.com/P8u7erWy

Yes, I double checked both.

I see. Can you check in Appearance > Customize > Additional CSS if you have this code?:

@media (max-width: 768px){
.inside-header{
	padding-bottom:100px;
	padding-left:10px;
	padding-right:10px;
	padding-top:80px;
}}

Try removing the top and bottom paddings in this code.