- This topic has 21 replies, 4 voices, and was last updated 4 years, 1 month ago by
.
-
Posts
-
Hello GP Support Team,
I am using GP Premium and a GP child theme.
The issue I am having only shows on a mobile device, which is where most of the website traffic is coming from.
The homepage margins (the white spaces on both edges) on mobile devices are off.
The left margin looks okay. However, the right margin size is more than double the left margin’s.
The issue is visible only on the home page and only on a mobile. Every other page, post, and desktop view are fine.
The Content Padding for containers on mobile is set equally: 15 left & 15 right
I already tried everything: aligning the home page block center, full width, wide with, nothing worked so far.
Also tested the homepage on different mobile devices, it’s the same issue.
Many thanks,
ZoltanCustomer Support
Hi there,
Try this CSS:
@media (max-width: 768px) { .wp-block-latest-posts.is-grid li { margin-right: 0; } }Adding CSS: https://docs.generatepress.com/article/adding-css/
Hi @Leo,
Hope you are doing great. Thank you for the quick reply!
I have added the suggested CSS under theme files, style.css in the GP child theme.
It did not change the homepage margins, and I am still experiencing the same issue as reported.
Please let me know what to do.
I’m not seeing the CSS being added currently.
This is the result when I add it using the browser developer tool:
https://www.screencast.com/t/JtVkZZZ5BHi @Leo,
Thanks, that is exactly how the homepage should look on mobile, with equal margins.
Is it possible that I added your suggested CSS at the wrong place?
Make sure your previous CSS has no syntax errors.
For example, the previous snippet is missing a closing
}:
https://www.screencast.com/t/xtn4JDzuBHi @Leo,
Thanks, well spotted.:)
I accidentally deleted the last bracket, when I added your CSS.
This is the full CSS now, but the homepage still looks the same on mobile, with no change to the right margin.
https://www.screencast.com/t/JtoAKUFrPfz7Do you have any idea why?
Can you try adding my CSS in the Additional CSS field in the customizer?
Make sure that’s the only CSS in it and all caching is cleared.
If it works there then something is still wrong in your
style.css.Hi @Leo,
As you suggested, I have added your CSS in the Additional CSS field in the customizer. It’s the only code there.
It works perfectly now with the mobile margins, thank you!
There must be something wrong within the style.css, and I don’t know what 🙂
I don’t see your other CSS working either.
Is the child theme even activated?
Hi @Leo,
I thought that the GP child theme was activated, but I could be wrong.
Hmm that looks correct. I believe something is causing the preventing the child theme from loading though.
Just to confirm, you’ve downloaded a child theme from here?
https://docs.generatepress.com/article/using-child-theme/Also, any specific reasons you are using a child theme?
Hi @Leo,
I have downloaded the same child theme zip file, but it was some time ago, I don’t remember exactly.
The reason I started using the child theme is that it was suggested on several forums as the preferred method to keep all changes to style.css or functions.php or header.php without losing it after every GP theme update.
The child theme, not loading is concerning though. Where did you check it, please? I only see it’s activated (https://www.screencast.com/t/leqlY0pMy4), but if the child theme loads properly I am not sure how to check.
Should I open a new ticket for this?
Thanks!
Customer Support
Hi there,
if inspect your site using the browser developers tools then i can see the GP Child Theme stylesheet is loading:
https://www.screencast.com/t/KTEuDl4KPA6p
Theres a possibility an old version of the stylesheet has been cached. If you can clear any plugins or server page caches to see if that works.
Hello Again,
I have now cleared all server cached files.
But I could not verify if the GP child theme loads. I used google chrome developer tools -> network, and I don’t see a CSS section under “Network”, that David has on his screenshot.
This is what I can see in developer tools (on google chrome): https://www.screencast.com/t/rAhjui4ZI2f
- You must be logged in to reply to this topic.
