Container / Header Padding on mobile does not change

Forgot to attach the page it's about. It's in the private information section.

Hi there,

Could you go to Appearance > Generatepress and check if the Spacing module has been activated?
https://www.screencast.com/t/MBHkXBInc6
Let me know :)

Hey Ying, yes it is activated.

Oh I see, you are talking about the layout meta box, you can find it here:
https://www.screencast.com/t/o7RIbivgDZO

For the header padding, I logged in your website, I see the options are there:
https://www.screencast.com/t/Jyqn67kFAQs

But you have quite some padding rules overriding each other:
https://www.screencast.com/t/MobDF2mqoWQ

I'll suggest to check your CSS to see if there's any of them are no longer needed or conflicts with customizer settings, you could disable all CSS to start with, then activate them one by one.

Hey Ying, thank you very much for the info!

I made a screenshot of my custom css file. Except custom fonts (which cannot be seen in the screenshot), this is all of the customisation I did and I don't see any padding changes there.
https://drive.google.com/file/d/1_I3KJs7x_MGPVLOQK5RQOHYsZZ7s3PL0/view?usp=sharing

Could the overriding happen inside the Customiser itself? Maybe that's the issue why mobile padding changes don't happen. I searched but couldn't find padding settings with the numbers seen in the screenshot you shared.

Best regards

Hi there,

the .entry-content { margin: 50px; } rule is causing the issue.
Change the margin to margin-top

Thank you David! I changed this, but still not seeing any changes I make to the mobile header or the mobile container padding. Is still something overriding each other?

Hi there,

Thank you David! I changed this, but still not seeing any changes I make to the mobile header or the mobile container padding. Is still something overriding each other?

You can add padding to the mobile header by using this CSS:

#mobile-header .inside-navigation {
    padding: 20px;
}

As for the mobile container, I'm not sure I get what you mean.

To clarify: Do you want to ADD padding? If so, try adding this CSS:

.inside-article .entry-content > * {
    padding: 0 21px;
}

It's applied to the children instead of the container because adding padding to the container will affect the full width image on the first section.

Hi Elvin, thank you very much!
To clarify:

In the Customiser > Layout > Container, there is a section at the bottom called 'content padding' I was able to change the values and the padding of the desktop version of the site. But when I click on the mobile icon there to adjust the setting for mobile view, the changes don't become visible. Nothing happens.

The same applies to Customiser > Header > Header Padding

I want to change adjust a few things padding-wise as the mobile view is not optimal.

So shall I use your CSS instead?

Yes you can go ahead with this for mobile's content padding:

@media(max-width:768px){
.inside-article .entry-content > * {
    padding: 0 21px;
}
}

You can use this as well:

#mobile-header .inside-navigation {
    padding: 20px;
}

Because the padding from Appearance > Customize > Layout > Header only applies to the default header but not on the mobile header.

Thank you so much Elvin, that works.

But why does it not work in the Customiser? There are even buttons for mobile, but why do the changes made there take no effect?

Because the padding from Appearance > Customize > Layout > Header only applies to the default header but not on the mobile header.

Understand. But also there is a button for mobile padding. Is this a Gutenberg/Wordpress thing that doesn't work for the GP theme?

But why does it not work in the Customiser? There are even buttons for mobile, but why do the changes made there take no effect?

Enabling "Mobile Header" means the theme renders a separate header, completely different from the default header which only appears on mobile. You technically have 2 headers with this enabled.

If you enable it and inspect the site, you'll see 2 headers. One with <header id="masthead>.. and the <nav id="mobile-header">. The former is the default header while the <nav id="mobile-header"> is the one added when enabled.

That "mobile button" is for the the mobile version of the default header(<header id="masthead>). The customizer currently doesn't have controls for the <nav id="mobile-header">. That's something we'll have to add in the future. :)

For now, the workaround is custom CSS. :)

Ah understand, Elvin, thank you for the detailed explanation. Helps a lot!

Best,

Jan