[Support request] .inside header padding-bottom on mobile

[Cynthia]

I am trying to adjust the padding-bottom on mobile view using this custom css but it is not working

@media (max-width: 768px)
.inside-header{
padding-bottom:65px;
}

I also tried

@media (max-width: 768px){
.inside-header{
padding-bottom:65px;
}
}

I used the inspect tool to located the element and when I adjust the padding-bottom in the inspect tool, it works, but then when I add the custom css in the customization window it does not. I’ve attached a screenshot.

Can you let me know what part I’m doing wrong or if is a different element that needs to be adjusted?

Thank you

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Cynthia]

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

[Fernando]

Hi Cynthia,

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

[Cynthia]

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?

[Fernando]

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

[Cynthia]

Yes, I double checked both.

[Fernando]

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.

[Author]

Posts