Help with layout

Develop, Build & Integrate CMS Development
1

Hello -- I’m trying to figure out how to get my slider elements at the top of this test page to stay exactly where they are no matter if someone zooms in on their computer. As of now, if someone zooms, because of the way it was laid out, the elements on each slide get very wonky. Is there a fix for this?

2

Hey @TaylorLioy,
thanks for the link.

Do you mean Browser zoom or OS zoom (like you can do in Windows with 100%,125%…)?

Most likely it’s gonna be a CSS thing, but unfortunately I can’t reproduce any “wonkiness” while zooming upto 200% on my 1440p monitor in Google Chrome.

Can you share screenshots/video of your experience?

Best,

Anton

3

Hey @Anton thanks for the reply! When I drag my screen edges to make it significantly less wide, or if I zoom in via my keyboard, this is when I see items overlap, get cut off, or disappear completely.

380×434 91.7 KB
448×489 81.1 KB

4

Hi @TaylorLioy and thanks for sharing the screenshots!
Thanks @Anton for your help!
Hi @Anton, @evaldas and @GRajput do you have suggestions to help @TaylorLioy, please?
Have a lovely day and thanks so much for your help!
Bérangère

5

Hi @TaylorLioy, just checking on you, do you still need help?
If yes, I’d like to consult with our Top Experts: Hi @Anton, @Krystina, @TomM2 and @KhushbooP11 do you have some ideas to help @TaylorLioy, please?
Have a great day and thanks so much in advance for your valuable contributions!
Bérangère, Community Manager

6

Hi @TaylorLioy

I took a look at the issue, and it looks like the behavior is related to the responsive breakpoints rather than the slider itself.

When you zoom in on a desktop browser, the browser effectively reduces the available viewport width. Once it reaches the tablet/mobile breakpoint, the responsive CSS is applied. This is why the slider elements can start overlapping, getting cut off, or shifting from their original positions.

I also noticed that the header has the following CSS:

@media (max-width: 834px) {
    .hide-tablet {
        display: none !important;
    }
}

This rule hides elements completely when the viewport is 834px or below. So when you zoom in far enough for the browser to trigger the tablet breakpoint, those elements are hidden, which can also cause the remaining content/layout to look incorrect or disappear.

I would recommend checking the tablet and mobile styles for the header and slider and making sure the elements have appropriate responsive positioning at those breakpoints rather than relying on the desktop layout.

I hope this helps you out. Please mark it as Solution Accepted and Like to help another Community member.
This post was created with the assistance of AI tools

Thanks!