Archived topic
Content area clips with page hero on mobile
3 replies · Started by Juha on April 2, 2020
Hello!
Site that I'm working on: http://www.juhasmith.com
When viewed on mobile, the content area (the one with the transparent background) clips with the page hero. On desktop it works fine, and I have the following CSS to make that happen
.page-hero + #page {
margin-top: 20px;
}The code comes from the Mellow-template. I just changed the margin amount to make it not clip with the hero. But it doesn't affect the mobile version. How do I fix it?
Another thing that's probably related to the issue: on mobile, the text Blog on the front page is too close to the menu button. On other pages it works fine.
Any help is much appreciated. Thanks in advance!
Hi there,
I'm seeing this CSS in Additional CSS field in the customizer:
@media (max-width: 768px) {
#page {
margin: -75px 15px 0 15px;
}
}Does that help?
As for the second issue, try increasing the top padding with the mobile toggle activated:
https://docs.generatepress.com/article/header-element-overview/#padding
Thank you so much, both problems are now fixed! I was just banging my head against the wall last night, but everything seemed so simple now. Thanks :)
No problem :)
