[Resolved] Content area clips with page hero on mobile

[Juha]

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!

[Leo]

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

[Juha]

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 🙂

[Leo]

No problem 🙂

[Author]

Posts