[Support request] Content wider than screen on Tablet/Mobile with sticky header issue

Home Forums Support [Support request] Content wider than screen on Tablet/Mobile with sticky header issue

Home Forums Support Content wider than screen on Tablet/Mobile with sticky header issue

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2070386
    Bela

    Hi,

    I got a content wider than screen notification from Google. I checked all pages, and I found that only on the Blog list page (https://rettegi.com/blog/) and only on Tablet/Mobile I can scroll to right, and a white vertical line appears (example: https://prnt.sc/2661e2m) outside the content.

    In addition to the previous error, the header only on this page is malfunctioning and disappears halfway when scrolling (https://prnt.sc/2662ktp).

    These two error can work together: https://prnt.sc/2662oxl

    I checked the page with inspector, I turned off caching, but I didn’t find the solution.

    These two errors appears only on Blog page, other pages works well (for eg: https://rettegi.com/bemutatkozas/).

    Please help me, to solve these issues.

    Greets,
    Bela

    #2070557
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can disable all plugins except GP Premium to eliminate conflicts from other plugins first?

    If it’s indeed a GP issue then it should happen on all pages and not just the blog page.

    Let me know ๐Ÿ™‚

    #2070801
    Bela

    Hi Leo,

    I tried to turn off all plugins, but unfortunately the errors did not go away.

    #2070807
    Elvin
    Staff
    Customer Support

    Hi Bela,

    Something in your sidebar is causing this issue.

    It’s the label of the search bar.

    You can try adding this CSS to address the issue.

    .inside-right-sidebar {
        overflow-x: hidden;
        position: relative;
    }

    or this:

    label.wp-block-search__label.screen-reader-text {
        display: none;
    }

    But it may be best to remove the label completely.

    #2070820
    Bela

    Hi Elvin,

    thank you very much, for your help! The problem is solved. ๐Ÿ™‚

    An interesting thing is that both the sidebar and the search box are original, no unique changes have been made to them.

    #2070826
    Elvin
    Staff
    Customer Support

    It’s a CSS interaction issue between this one from WordPress core CSS:

    .wp-block-search .wp-block-search__label {
        width: 100%;
    }

    And this one from the theme:

    .screen-reader-text {
        border: 0;
        clip: rect(1px,1px,1px,1px);
        -webkit-clip-path: inset(50%);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute!important;
        width: 1px;
        word-wrap: normal!important;
    }

    Specifically, the interaction between having the property position: absolute; and width: 100%;.

    No problem. Glad you got it sorted.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.