- This topic has 15 replies, 4 voices, and was last updated 3 years, 2 months ago by Elvin.
-
AuthorPosts
-
January 25, 2021 at 7:38 am #1632931scometamus
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! 🙂
January 25, 2021 at 7:39 am #1632932scometamusForgot to attach the page it’s about. It’s in the private information section.
January 25, 2021 at 9:52 am #1633128YingStaffCustomer SupportHi 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 🙂January 25, 2021 at 11:04 am #1633208scometamusHey Ying, yes it is activated.
January 25, 2021 at 11:41 am #1633237YingStaffCustomer SupportOh I see, you are talking about the layout meta box, you can find it here:
https://www.screencast.com/t/o7RIbivgDZOFor the header padding, I logged in your website, I see the options are there:
https://www.screencast.com/t/Jyqn67kFAQsBut you have quite some padding rules overriding each other:
https://www.screencast.com/t/MobDF2mqoWQI’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.
January 26, 2021 at 3:22 am #1633921scometamusHey 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=sharingCould 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
January 26, 2021 at 9:39 am #1634540DavidStaffCustomer SupportHi there,
the
.entry-content { margin: 50px; }
rule is causing the issue.
Change themargin
tomargin-top
January 26, 2021 at 1:49 pm #1634841scometamusThank 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?
January 26, 2021 at 9:17 pm #1635076ElvinStaffCustomer SupportHi 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.
January 27, 2021 at 7:39 am #1635780scometamusHi 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?
January 27, 2021 at 4:33 pm #1636234ElvinStaffCustomer SupportYes 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.
January 28, 2021 at 12:14 pm #1637428scometamusThank 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?
January 28, 2021 at 12:15 pm #1637429scometamusBecause 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?
January 28, 2021 at 4:56 pm #1637617ElvinStaffCustomer SupportBut 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. 🙂
January 29, 2021 at 3:38 am #1637961scometamusAh understand, Elvin, thank you for the detailed explanation. Helps a lot!
Best,
Jan
-
AuthorPosts
- You must be logged in to reply to this topic.