White Space Added at Screen Width 600px

  • Resolved fulloutcreative

    (@fulloutcreative)


    1 year, 5 months ago

    Using chrome developer tools and on my iphone, I am seeing additional white space added when the screen-width hits 600px. The foobar-added margin-top is unchanged at that screen-size, but I cannot identify what is causing the issue. Ideally, the FooBar notification pushes down content to the top-menu is not obstructed. This works at wider page loads, but once we hit 600px, the notification covers the menu and additional white space is shown on top.

    I have this issue on two sites and both are using the Astra theme.

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support elviiso

    (@elviiso)

    Hi @fulloutcreative

    There is some CSS coming from your theme file targeting the body element that is causing this issue on mobile devices. Here’s an image showing the CSS causing this conflict: https://prnt.sc/UiWZYAMxQMh7

    Here’s the actual CSS:

    body:not(.logged-in) {
    position: relative;
}

    You can add the following CSS to your child theme’s main CSS file to counter this conflict:

    @media (max-width: 600px) {
  body:not(.logged-in) {
    position: inherit !important;
  }
}

    Thanks.

    Kind regards,
    Elvis.

    Thread Starter fulloutcreative

    (@fulloutcreative)

    Thanks! I deployed the CSS and confirmed the resolution.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘White Space Added at Screen Width 600px’ is closed to new replies.