Archived topic

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

5 replies · Started by Bela on January 5, 2022

Viewing posts 1–6 of 6

January 5, 2022 at 12:51 pm #2070386

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

January 5, 2022 at 5:44 pm #2070557

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 :)

January 6, 2022 at 12:08 am #2070801

Hi Leo,

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

January 6, 2022 at 12:27 am #2070807

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.

January 6, 2022 at 12:49 am #2070820

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.

January 6, 2022 at 1:00 am #2070826

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.

This archived topic is closed to new replies.

Start building better websites today.