How should I handle sticky scroll in Wix Studio when the viewport is landscape?

Ask the community
, , ,
1

Hi everyone,

I’m working on a Wix Studio section that uses a 100vh layout with several sticky images while scrolling in portrait view.

The issue is that the layout doesn’t behave correctly in landscape mode on mobile/tablet devices.

Previously, I solved this by duplicating the entire section: one version optimized for portrait and another for landscape. Then I used code to determine which version should be displayed depending on the screen orientation.

It worked, but I honestly can’t imagine this is the standard or recommended approach — it feels really cumbersome and inefficient.

So I’m wondering:

  • What’s the best practice for adapting 100vh sections with sticky elements to landscape mode in Wix Studio?

  • Do you usually handle this with breakpoints only?

  • Is there a better responsive approach for sticky-scroll sections?

  • Would using different height units instead of 100vh help?

I’d really appreciate any advice or examples. Thanks!

2

A few questions :slight_smile:

  • When in horizontal, which breakpoint does tablet/mobile default to? Does it show the desktop breakpoint?
  • Is this sticky vertical scrolling or horizontal scroll?
  • What’s actually the issue? Do you have screenshots of what it looks like?

I think most of the time this can be handled via breakpoints, and ocassionaly with advanced sizing and the option to set min/max on specific elements/sections etc.

3

Hi, thanks for your reply!

First of all, I’ve been saying my section was 100vh – that’s not correct, it’s 580vh in total and above the case I’ll describe is another container…

(1) I’m not sure if I’m missing something, but doesn’t the displayed breakpoint depend on the screen width? For example, on my iPad in landscape mode the desktop breakpoint is shown. I assumed that on narrower screens it would switch to the tablet breakpoint. So far, I haven’t changed any breakpoint settings — I’m still using the default desktop, tablet, and mobile breakpoints provided by Wix Studio.

(2) Regarding the sticky setting: I’m using vertical scrolling. Is there a specific setting in Wix Studio where I can choose between vertical and horizontal scroll behavior for sticky positioning?

(3) And sorry for not explaining the issue clearly before. In this section, I want the three images to appear one after another while the user scrolls vertically.

The idea is:

  • The first image sticks somewhere in the upper part of the screen.

  • While scrolling, the second image moves upward and sticks at the exact same position as the first one. (not sure with which unit I should work ideally in that case…)

  • The same happens with the third image.

So in the end, the images visually stack on top of each other. Then, once the user continues scrolling, the whole stack moves upward together until it leaves the screen.

This currently works fine in portrait mode (see attached screenshots portrait-1 to portrait-3)*. However, in landscape mode the sticky behavior breaks the user experience. The first image sticks to the top, but it can’t be fully seen on the screen (landscape-1). When continuing to scroll, it stays in that position until the next section appears (landscape-2). As a result, the user never gets to fully see the first image, and images 2 and 3 are not visible at all.

So now I’m wondering how you usually handle sections like this. Do you typically build separate versions for portrait and landscape mode and then activate the correct version by code? Or do people create additional breakpoints specifically for landscape mode (for example separate landscape breakpoints for tablet and mobile)? Or is there another common solution for this?

Maybe it’s too obvious but I just can’t figure it out… I feel like this must be a very common issue, so I keep thinking there has to be some setting or workflow in Wix Studio that makes this easier to handle.

I hope my description makes more sense now… if there is any other information I can provide please let me know :slight_smile:

___
* Since I can just attach two images, I’ll attach portrait-3 and landscape-2.

portrait-3.PNG
portrait-3.PNG1179×2556 217 KB

landscape-2.PNG
landscape-2.PNG1920×886 122 KB

4

portrait-1 and 2

portrait-2.PNG
portrait-2.PNG1179×2556 229 KB

portrait-1.PNG
portrait-1.PNG1179×2556 235 KB

5

landscape-1

landscape-1.PNG
landscape-1.PNG1920×886 158 KB

6

You’re right - it’s based on the screen width :slight_smile: I was mainly curious to understand which breakpoint your tablet/mobile devices changed to when landscape (e.g. did it show the tablet/desktop breakpoint etc)

There are setups that allow for a horizontal scroll, such as:

Which can be combined with different settings to create a “sticky” horizontal effect

I’d normally encourage building from desktop down - so get it working on desktop, and then adapt it on tablet and mobile.

This is usually where advanced sizing might be handy. For example, setting the max-height of the image to 90vh, so it doesn’t grow larger than the height of the screen.

This video also does something very similar, so might help as starting point

7

Hi,

Sorry for the very late response. In the meantime, I found a workaround for my specific use case, and the second tutorial you sent me (the stacked card scrolling effect) was very helpful. Thank you for that.

But anyways I would really appreciate having an option to define element behavior separately for landscape and portrait orientations, especially on tablets and phones.

For example, I might have an image set to a sticky position at the top of the screen, followed by text content. This can look great when the device is held vertically. However, when the device is rotated into landscape mode, the image may become too tall to leave enough space for the text below.

In this situation, I would like the ability to disable the sticky behavior specifically for landscape orientation. That way, users could scroll normally and view the full image first, followed by the text, instead of having the image remain fixed while they scroll through the entire section without ever seeing the full image and the content beneath it at the same time.

I don’t want to simply reduce the image size, as I want to ensure that its content remains clearly visible and readable.

Furthermore, it would be extremely useful if sticky positioning and scroll animation settings (such as trigger areas, animation distance, or scroll ranges) could be configured independently for portrait and landscape orientations.

I believe this would provide much greater flexibility when designing responsive experiences across different devices.

Thank you for considering this feature, or for sharing any best practices on how to handle this type of responsive behavior within Wix Studio.