header image/elements mobile overlay issue

  • Resolved collinvarney

    (@collinvarney)


    6 years ago

    Hi,

    On all other pages from the menu on mobile and desktop, the header image and contents below it are spaced out, but on the home page for MOBILE view, there is an odd overlay issue that I can’t crack.

    It seemed to have occurred after updates (I fixed other pages with an image box for header instead because I didn’t want to deal with header image changes in theme), but for the home page, it doesn’t seem to stick on mobile.

    I appreciate any guidance on this issue!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter collinvarney

    (@collinvarney)

    6 years ago

    I meant to mention that the same issue occurs with a tablet view as well.

    Theme Author themevision

    (@themevision)

    6 years ago

    Hello @collinvarney!

    The problem you have is caused by your customization of the Elementor Page builder Elements. In two Elements (elementor-element-1d619d0 and elementor-element-1290cb0) you added margin-top and margin-bottom values ​​of -600px (on screen widths less than 1024px). Also, on screen widths less than 767px. these elements have margins of -240px.
    When I turn off these settings, your site is working normally.
    https://pasteboard.co/J4ET7Wq.png

    Regards

    Thread Starter collinvarney

    (@collinvarney)

    6 years ago

    Thank you so much for that information about the Elementor elements. I’m new with a lot of this, so I could really use some clarification on how to save those changes you speak of.

    I’m able to make those changes happen in Inspector (though mine doesn’t look the same as yours in the screenshot, which might be part of my confusion), but I don’t know how to save those changes once they’re made.

    How do I do that?

    Theme Author themevision

    (@themevision)

    6 years ago

    Hello, @collinvarney!

    There are two ways to solve this:

    1.
    Edit your HomePage with the “Elementor” page builder, then click on the element you want to change margins, open the “Advanced” tab, select the Tablet/Mobile mode and remove the margins.
    https://pasteboard.co/J4GARer.png

    or

    2.

    Insert the following code into Customizing->General->Additional CSS:

    @media only screen and (max-width: 1024px){
.elementor-10 .elementor-element.elementor-element-1d619d0,
 .elementor-10 .elementor-element.elementor-element-1290cb0{
  margin-top:inherit!important;
  margin-bottom:inherit!important;
 }
}

    Regards

    Thread Starter collinvarney

    (@collinvarney)

    6 years ago

    Awesome! Thanks so much.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘header image/elements mobile overlay issue’ is closed to new replies.