[Resolved] Website Header Breaking on Mobile

[Haneet]

Hello,

Yesterday, I redesign my site’s homepage and added two Google Web Stories on the top, but now it breaks the website header on mobile. When I click on the search icon in the header, it will open the Google Web Stories, I think something going wrong with CSS, can you please check and tell me how to fix it?

Here’s my site’s screenshot – https://ibb.co/nsf91Jw
My website name – https://www.ytechb.com

Note: I tried same by opening incognito mode, it works fine, but when i open the site on a real mobile device, header elements are not clickable it will open a web story instead.

[Fernando]

Hi Haneet,

What Plugin are you using to add the Webstories? The webstories’ position seems to be off. It would be best to reach out to the plugin support for this feature for insights.

Right now, from my end, I’m not seeing the Webstories, but they seem to be taking up the entire viewport. The CSS is entirely from their plugin.

You can test adding this through Appearance > Customize > Additional CSS and see how it goes:

.web-stories-list__story-content-overlay {
    position:static !important;
}

However, as mentioned, it would be best to reach out to the support of this plugin for assistance.

[Haneet]

Hello,

I am using the official Web Stories plugin by Google and used a Grid of 50-50 then embed stories directly.

I tried the CSS code you shared, but still facing the same issue:

.web-stories-list__story-content-overlay {
    position:static !important;
}

[David]

Hi there,

can you clear your browser caches as i am not experiencing that issue – let us know.

[Haneet]

Not working for me, SO, I changed the layout.

Now I am using a Query Loop with one story, here’s how it look – https://ibb.co/99VGRFz

Can I add two borders like this – https://ibb.co/ySV54Ts

I tried this CSS but not work as expected – https://ibb.co/239FPDW

Waiting for your reply.

[Fernando]

You can try adding to the Class list of the Image Blocks, then add this through Appearance > Customize > Additional CSS:

.add-custom-shadow {
    position: relative;
    z-index: 1;
}
.add-custom-shadow:after {
    content: "";
    height: 95%;
    width: 90%;
    position: absolute;
    background-color: #5555bb;
    z-index: -1;
    top:5%;
    left: 10%;
    border-radius: 16px
}

.add-custom-shadow:before {
    content: "";
    height: 90%;
    width: 90%;
    position: absolute;
    background-color: #222277;
    z-index: -2;
    top:10%;
    left: 15%;
    border-radius: 16px
}

You may alter the values to your preference.

[Haneet]

Thanks, It worked!

[Fernando]

You’re welcome Haneet!

[Author]

Posts