Layout Problems Instagram Feed

[Renzo_Smania]

hi

I Experience some strange layout issues on my website especially on smaller devices. The problem seems to be comming from my instagram feed.

My viewport-width and height seems to be broken on smaller devices:

• the header is wider than 100% of the viewport-width and is overflowing. also, the header disappears on scrolling down.
• the cookie-info-bar on the bottom page disappears on scroll up
• these are the only two elements in my body, that have position fixed set to them

i added some simple custom-css-classes (added via my own css-file):
.eapps-instagram-feed-posts-item-template-classic {
@apply rounded-fluid-base;
}

.eapps-instagram-feed-posts-item-image-wrapper {
@apply aspect-[3/4] lg:aspect-[0.7];
img {
@apply object-cover w-full h-full;
}
}

.eapps-instagram-feed-posts-inner {
@apply relative;
}

.eapps-instagram-feed-posts-item-user-image-wrapper {
background: transparent !important;
}

.eapps-instagram-feed-posts-grid-load-more {
@apply bg-transparent m-0 w-full !important;
}
.eapps-instagram-feed-posts-grid-load-more-text {
@apply border rounded-full border-black bg-black text-primary inline-block px-3 py-[5px] md:hover:bg-primary md:hover:text-black md:hover:border-black transition-colors leading-none font-sans text-base font-semibold;
}

.eapps-instagram-feed-posts-grid:has(
.eapps-instagram-feed-posts-grid-load-more-enabled
)
.eapps-instagram-feed-posts-inner::after {
@apply absolute w-[110%] h-fluid-2xl bg-gradient-to-t from-primary from-50% to-transparent to-100% left-1/2 -translate-x-1/2 bottom-0 content-[‘’] !important;
}
I removed them temporarily, which did not help.

the page: https://komeo.sweap.ch

[Max]

Hi there, @Renzo_Smania

I am really sorry that you’ve encountered this issue! I’ve checked your website on my phone and there is no issue on my end:

The width seems to be correct, and the cookie bar is always displayed. As for the overflowing, did you mean the effect highlighted in the screenshot?

Anyway, could you please double-check your website and let me know if the mentioned issues still persist?

If they are, please send me a screenshot of what you see and specify the exact model of your device. I’ll be delighted to look into this for you

[Renzo_Smania]

thanks for your feedback.

this is how it looks on my device (samsung galaxy s10 → Chrome):

also: the same thing is happening in chrome (windows) and edge(android), when using the dev-tools and reducing the window-width.

what browser are you using?

[Max]

I’ve upgraded your user level, so now you can attach the videos here

I’ve checked on iPhone X in Safari browser. I’ve also tried to replicate the issue in Chrome (Windows) following the steps you’ve mentioned, but it’s working fine on my end.

When sending a video, please also specify the mobile device where the issue occurred? It might help us understand what’s going on.

[Max]

I’ve just watched your video in the chat, thanks. So, we just need to know the device and browser you were using in this video

[Renzo_Smania]

i just updated my old post:
I used the following devices:

• Samsung Galaxy S10 → Chrome & Edge
• Windows → Chrome & Edge using dev-tools and adjusting the screensize. Touch must be enabled.

It probably has something to do with touch then?

[Max]

Thank you so much!

I’ve shared this info with the devs and will get back to you a bit later

[Max]

Just a couple of questions to clarify things:

• In your screencast, I haven’t noticed that the header disappears on scroll. Does it mean, that this issue is eliminated now?

• Also, I see that the cookie bar isn’t displayed right away, not on scroll. Have you accepted cookies before and closed the bar, or it’s always not displayed there?

[Renzo_Smania]

The header does not disappear completely, it moves up, which is strange, as its set to fixed and top:0; so it should just stay where it is.

and yes, i accepted the cookies.

also: i should not be able to move the screen left to right as seen in the video. If you want, i can disable the feed, so you can see how it should look like.

[maxim (Maxim Smith)]

Hey @Renzo_Smania !
Weird… if i go to your website… everything works. The Instagram Feed too!
I’ll check your page again to find the problem!

[Renzo_Smania]

Are you using android and chrome as well?

what resolution does your device have?

[maxim (Maxim Smith)]

→ Windows: Opera GX
→ iPhone: Safari
@Renzo_Smania

[Renzo_Smania]

in opera: Did you use the dev-tools with touch enabled?

[maxim (Maxim Smith)]

Let me see… be right back

[Renzo_Smania]

thanks for helping by the way

[maxim (Maxim Smith)]

Nope @Renzo_Smania !

[maxim (Maxim Smith)]

No Problem!

[Renzo_Smania]

did you experience the same issues with touch enabled?

[maxim (Maxim Smith)]

Actually no. @Renzo_Smania!
My Widgets are working well… hm… Like @Max said. there is no issue
Let me or them (@Max, @Helga) know if the problem wont go away!

[Max]

As I’ve mentioned above, your request is with our devs now. I’ll update you once I have their response