Layout breaks below 320px in Wix Studio

I’m I’m facing an issue with a website built in Wix Studio, and I’d appreciate your guidance.

When the screen width is 320px, the layout looks fine. However, as soon as the screen width drops even slightly below 320px (for example, 319px), the entire layout breaks. The structure changes unexpectedly, and the mobile menu/header switches back to a desktop-style layout, which completely disrupts the page design.

I understand that Wix Studio primarily uses 320px as the mobile breakpoint, but in real-world usage, users can still access the site at widths below 320px, and this behavior is causing serious usability issues.

Could you please advise:

  • Is there any way in Wix Studio to control or stabilize the layout below 320px?

  • Are there any recommended best practices or settings to prevent the header/menu and layout from reverting or breaking at 319px and below?

  • Is this a known limitation, or is there a workaround you would suggest?

I’d really appreciate any professional solution or guidance you can provide.

Hi, @Usman_Cheema !!

Does this happen within the Wix Studio editor even when the layout is set to 319px or less? Or is it something that only occurs on the live site?:slightly_smiling_face:

I’m wondering what device they are using that is less than 320px ? I know the iphone 5 was 320px so they must be very old devices.

As @Dan_Suhr said, have you got an example of any devices this is happening on?

320px is the lowest size a Studio site will get to at the moment :slight_smile:

@noahlovell

First of all, I apologize for my English, it is not my primary language.

Hello, I’m solving the same problem.

Although it may seem that it’s a problem with a resolution below 320px, it’s not, it’s probably a bad evaluation of the conditions whether it’s a mobile device or not. I’ll try to explain it to you properly, including specific problem phones.

I encountered a problem with displaying a website created in wix studio on some mobile phones. Specifically on the Galaxy Z-fold 5 and Samsung A15, huawei p15, huawei P smart 2019.

The thing is that the layout that is set in wix studio for mobile display is not displayed on these phones - so the columns do not wrap under each other, but it is displayed as in the desktop layout. The problem is not just in one section, but the entire website is broken like this, including the header - it is also displayed as a desktop one. It works on most phones, but not on some. It simply tries to cram the desktop layout into the phone’s resolution, so the columns are insanely narrow and the text overflows from them. I managed to simulate it in devtools - it happens when I set a responsive resolution and reduce the width below 320px - suddenly the mobile layout stops showing and exactly what I described happens. But these phones definitely do not have a resolution below 320px, I thought that the z-fold was an exception, that there might be some problem with how it can be folded, but it is also manifested on 3 other phones.

It is also necessary to mention that the problem does not appear on all galaxy z fold 5. For one customer it is broken and for another with the same phone and browser it is displayed correctly.

I wonder if the problem is that it is evaluated according to user agent strings? Because they can be different even on the same phone model? I do not know what you decide based on, but it does not always work correctly. I need to solve this on the website for the client, it is really a problem.

The z-fold has a resolution of 2176 × 1812px (inner screen CSS width is roughly 690 to 928 px (depending on screen zoom) by ~700 to 1080 px tall. The cover screen CSS viewport is narrower, typically 340 to 360 px wide by ~740 to 800 px tall.), the samsung A15 has a resolution of 2340 × 1080 (CSS viewportu 412 × 892 px), huawei p smart 2019 is 2340 x 1080 - certainly not below 320..

You probably have a poorly targeted recognition of the mobile device - because it recognizes it as a desktop screen. Please advise what to do with it, I don’t want to pay for a non-functional thing. :frowning: It turns out that this is not just my problem, I found a lot of threads where people are solving the same problem.

I can attach only 2 images :frowning:
You can check live web on mobile device and on desktop:

incorrectly displayed desktop layout on mobile device Samsung A15 (same as on galaxy Z-fold 5 and huawei):

@Dan_Suhr Please read my prev comment, i can add only 2 attachments by 1 post..

properly displayed desktop layout:

properly displayed mobile layout:

Same bug appeared when devtools responsive display set below 320px - desktop layout is triing to fit the mobile viewport :frowning: