Theme editor - mobile preview not accurate

Support
#1

Hi,

the first image is from inside the editor, the second is the actual view of the page on a mobile device.

Why is this different and how can I change the mobile preview dimension/proportion to better visualise the design on mobile devices?

Screen Shot 2020-06-07 at 20.59.23
Screen Shot 2020-06-07 at 20.59.23962×1644 67.8 KB
Screen Shot 2020-06-07 at 20.59.33
Screen Shot 2020-06-07 at 20.59.33710×1172 68.2 KB

#2

Hi Alessandro,

Thanks for reaching out.

The builder preview only simulates the device width, but not the actual device’s rendering. And the builder uses common device sizes, hence not all devices are covered. That includes 767px for mobile, 979px for smaller tablet, and so on. Mobile devices can have 1200px even if it’s small, and it has pixel per inch technology that makes it more different than desktop. This is not a limitation of the builder, but by the browser since it can only simulate the width, not the pixel ratio.

To make it simply, the builder device view are generic and uses range sizes, example, 0 - 767px for mobile, which means on same range, the 480px is considered mobile. But that doesn’t mean mobile devices with 767px will look the same on 480px. And making them the same is not currently possible, unless you’ll do some customization that will allow it to be identical for every pixel size changes.

Thanks!

#3

Hey Alessandro,

The smallest mobile screen width of the builder preview is 480px. Height is not taken into account and that’s generally the case in all builders because there is no way to take into account thousands of phone screen sizes.

Your phone’s screen size is lower than what you see in the builder so that’s why you see the text wrapping is different. Your paragraph text is fine but I’d just recommend that you set up responsive text for your “Define yourself…” headline. You can learn how in this video here: https://youtu.be/SdQHpAgFumw

In the future, more flexibility might be added to the responsive preview sizes. For now, regretfully, there’s no way to preview smaller screen sizes.

Hope that helps and thank you for understanding.

#4

Hi Christian,

Thanks for the prompt reply. I’ll have a look at the responsive text video.

Also, will be great on the cornerstone editor setting to change the preview device breakdown. This will allow to set custom dimension.

Have a great day

#5

You are most welcome!
If you need anything else we can help you with, don’t hesitate to open another thread.

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.