[Resolved] Content area clips with page hero on mobile

Home Forums Support Content area clips with page hero on mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1223944
    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!

    #1224010
    Leo
    Staff
    Customer Support

    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

    #1224447
    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 🙂

    #1225106
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.