Feature change suggestion: Mobile XS view should shrink to 320px, not 480

[klepow]

Hi there,
I am coming with a little question.

Why would anybody use mobile view preview? To see how one’s site would like on a mobile device, yes?

Unfortunately currently even iPhones 6/7/8 render items in 375px width. And this is a huge problem because there is a big difference between 480 and 360/320px wide view and site’s layout or menu may fall apart. Top menu is a great example as it was in my case. On 480px it was OK but it didn’t fit the screen of my iPhone, menu Items were collapsing and the whole menu looked awfully. But it was impossible to check with Pro site builder.

I state that “480PX & SMALLER” is not enough and I constantly have to use DevTools device toggle to be able to check my site in REAL smartphones resolutions. I address this as a real issue, as users that are not that experienced in developing sites may even not realize that something may be wrong with their’s sites.

Regards,
klepow

[rad]

Hi there,

Thanks for writing in.

It sounds like it’s more related to how you created your content. Our theme uses @media query through size range. All 767px width and below are mobile, all between 768px and 979px is medium tablet. And all 980px and above are larger tablet, laptop, and desktop. There is no restriction for 480px, 360px, 320px.

But yes, the preview in the builder has limited views but doesn’t restrict the @media capability, it only helps you see it’s view for common devices and there are many devices.

Example, the preview only display the view for 480px but it’s not mandatory to fit all your content in 480px, you could add more space allowance like 160px (80px per side). But I’ll add this as feature request.

Thanks!

[klepow]

You can take a look at https://pklepacki.pl page header. There is this “Twoje strony www” text header, which is of a certain width. Previously I wanted there to be 3 different (also longer) words, which fitted perfectly on 480px preview. Beside that it fitted OK for 480 it fell apart on my iPhone, which has 375px wide view. “pklepacki.pl” was pushed outside of a content to top and “www” was falling down to a second line.

The problem is that I would never know If I had a phone with higher render width. Media queries have nothing with the topic. Also my Menu Items containing of two words like “O mnie” collapsed with “mnie” getting below “O” to the second line. I was able to fix this with sizing settings, but again - I wouldn’t know about this because it didn’t happen on 480px preview.

[ruenel]

Hello There,

Thanks for the feedback and the vey keen suggestion for the previews. We’ve added this as a feature request so it can be taken into consideration for future development.

Thanks for your understanding.

[klepow]

Yea, sure, I know, an infamous never-to-do-list, I know. That’s life.
No prob, till then I’ll use DevTools instead of a baked in feature that pretend to work, sure thing!
Just never mind the totaly-squashed-and-almost-unusable builder’s controls in 320px view.
I’ll handle that.

[christian]

Hey @klepow,

We understand that it is limiting that you can’t view screen sizes lower than 480px in the builder. This is why we posted this as feature request. We could have recommended some solution to your issues though.

Regarding the “pklepacki.pl” text being pushed on top, try setting your Container’s Flex Layout > Vertical to Start.

For your “www” text dropping down, I’d recommend you use a smaller font size for this or use this responsive font size setup.

calc(15px + .8vw)

See how they work here.

Regarding your menu, you should show a Navigation Collapsed element in smaller screen sizes.

Thanks.