[Resolved] Container / Header Padding on mobile does not change

Home Forums Support [Resolved] Container / Header Padding on mobile does not change

Home Forums Support Container / Header Padding on mobile does not change

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1632931
    scometamus

    Dear GP-support,

    Container content doesn’t change. An option mentioned in this support post (https://generatepress.com/forums/topic/resizing-mobile-content-spacing/) (default, full width, contained) does not exist in my Customizer. Instead I only have ‘one container’ and ‘two containers’. How can I change the mobile container?

    BTW: the same also applies to Layout > Header, I am not able to change the Header padding for mobile there too.

    Using latest WP, latest GP Theme and Plugin version.

    Thanks in advance! 🙂

    #1632932
    scometamus

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

    #1633128
    Ying
    Staff
    Customer Support

    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 🙂

    #1633208
    scometamus

    Hey Ying, yes it is activated.

    #1633237
    Ying
    Staff
    Customer Support

    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.

    #1633921
    scometamus

    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

    #1634540
    David
    Staff
    Customer Support

    Hi there,

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

    #1634841
    scometamus

    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?

    #1635076
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1635780
    scometamus

    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?

    #1636234
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1637428
    scometamus

    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?

    #1637429
    scometamus

    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?

    #1637617
    Elvin
    Staff
    Customer Support

    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. 🙂

    A wise man once said:
    "Have you cleared your cache?"

    #1637961
    scometamus

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

    Best,

    Jan

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.