Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 7, 2021 at 3:48 pm #1270885
    bewelltended

    Hello! I am working on a site, and there is a good bit of white space between the mobile hero image and the menu+header. I was able to correct this on desktop, but I have been unable to target it on mobile.

    I did a lot of customization for the menu, so I’m wondering if some of my custom CSS is causing an issue.

    Could you have a look and see if there is a way to reduce this white space?

    Site linked in private content.

    Thanks so much!

    January 8, 2021 at 1:48 pm #1271053
    Rikard

    Hey bewelltended,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
#top.page-id-2794 #main>div.container_wrap:nth-child(1) .content {
    margin-top: 0 !important;
}
}

    Best regards,
    Rikard

    January 8, 2021 at 8:33 pm #1271154
    bewelltended

    Hi Rikard! Thanks so much for your reply.

    I’m not seeing any change with that CSS. Any other ideas?

    Thanks so much!
    Nikole

    January 11, 2021 at 2:23 am #1271433
    Jordan Shannon

    Hi,

    Did you add the code to the very top of quick css so it runs first? Also, clear the cache a few times over.

    Best regards,
    Jordan Shannon

    January 11, 2021 at 3:37 am #1271441
    bewelltended

    Hi Jordan and Rikard –

    Placing Rikard’s CSS at the top and clearing the cache did in fact do the trick.

    THANK YOU so much for your assistance!

    You can close this thread now.

    Cheers,
    Nikole

    January 11, 2021 at 8:18 am #1271512
    Nikko

    Hi Nikole,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Removing white space between header and hero image on mobile’ is closed to new replies.