480px Preview ok in Customizer but way off in Cornerstone?

Support
#1

Customizer:

Cornerstone:

The Customizer image more closely matches my iPhone image which is a 750px/375 UIkit size. When I do a screen dump of the image captures and count the pixels (boy does that get tedious!) I find the Customizer image is 460 px wide while the Cornerstone image is a whopping 704 px wide. This obviously don’t correspond with the stated resolution in Cornerstone of 480. This could have something to do with my monitor settings I imagine as I have a high pixel density monitor. Anyhow, my multiple questions:

  • Why are the previews different? Is the Customizer at 350px?

  • Can I set the Cornerstone preview to show a narrower preview that approximates a “safe” phone minimum width?

  • This article shows that after the iPhone 5 at 320px all recent phones have viewport widths between 360px (Samsung Galaxy S Series) and 414px (Google, Nexus, iPhone Plus). Is 360px considered a “safe” width to design for?

Thanks!

#2

Hi Ergo,

Thank you for writing in, the correct 480px preview is the one on Cornerstone, the one on Customizer is only 320px.

That is because the Customizer is a native feature of Wordpress, as you can see on Customizer there are only three screen sizes option (XS, M, XL), while on the Cornerstone and Theme Options there are five screen size (XS, S, M, L, XL)

Read through the following article if you need creating a new responsive view in Customizer (we can not provide support on this though as this is not a native feature of X)
Exploring Responsiveness in the WordPress Customizer

No, unfortunately, we don’t recommend changing these responsive previews. There are other things that coincide with these sizes like the Hide During Breakpoints feature.

The Cornerstone XS preview is 480px and smaller, the screen-widths you mentioned above is within that range, it should be safe.

I understand that there are still elements that might look different on 320px but most of those are text wrapping or headline being too big. In that case, you need to do the adjustments via custom CSS.

@media (max-width: 320px) {
	/*YOUR CSS RULES HERE*/
}

Hope it helps,
Cheers!

#3

Hi friech, and thanks for the quick response! We were hoping to have our menu usable even on a phone, which is probably not uncommon, so it would be very nice to have a custom Cornerstone preview that we could set to 320px to be sure our site looks good on most phones.

I had done a menu above in the XS setting of Cornerstone thinking it would look good on phones, only to find that the menu had stacked into three clumsy rows when I actually viewed it on my phone (see Customizer view above for similar.) Feature request: I think it would be great if there was a sixth “Custom” size that users could set.

I reviewed the article you linked to, which describes how to change the default sizes in the Customizer, but your text suggests that changing the default is not a good idea in Cornerstone. After experimenting with workarounds (see below) I think I may be ready to adjust the default anyhow as 320px is our second most critical size and we aren’t getting a helpful preview without going to the customizer.

If I wanted to change the width of the XP preview, how might I do it?

I truly do appreciate the help, and very much appreciate the code on how to add another breakpoint for smaller widths! And I don’t mean to sound argumentative, but I am ok with the 480 breakpoint, I just want to preview it at 320px as if it looks good there it will be fine up to 480, but the reverse is certainly not true.

Also, for others reading this, I learned that iPhones 6 and later in zoom mode (as mine was) also display at 320px so that might still be a relatively common size. Oddly I could not find good statistics on percentages of mobile screens at various sizes as are available for desktops.

Finally, the best narrow screen preview workaround I have found is to use developer tools on the Chrome browser:

  1. While in Cornerstone, right-click on the preview page and select Inspect (at bottom) to open the Chrome Developer Tools
  2. Toggle device toolbar on if necessary (Second icon from left at top of toolbar)
  3. Select Edit from the device drop-down at the far left of the device toolbar
  4. Click the Add New Device button, name, and adjust as required. These settings may vary based on your monitor display scaling settings. On my laptop a setting of 660 x 530 provided space for the Cornerstone menu at left and a 320 x 530 view that perfectly matches my zoomed iPhone 6 on the right.
  5. Save the settings, then you can restore them from the drop-down at any time.
#4

Hi Ergo,

Noted that, and yes, you can use chrome developer tool for mobile preview. The builder preview is only limited to generic screen sizes that are most used. There are different PPI, there is retina display, and more and not everything can be included. The preview only simulates the width and not the ratio. On some cases, a 768px device appears 375px, I too uses chrome developer tools for debugging.

Actual device testing is still superior that device simulation within the desktop. The device preview in the builder is only added there so you could edit the elements not visible on desktop but visible on mobile using HIDE DURING BREAKPOINTS option.

Still, noted this as feature request. As of now, there is no temporary workaround since this is a complex feature.

Thanks!

#5

Hi Rad, thanks for the reply. After spending much of the last day or two down the “why does everything look different everywhere” rat hole yesterday I came to realize that it is very complex, and that user settings beyond the developer’s control will impact the user’s experience. Still, we strive to understand those impacts so that we can provide a satisfying experience to a very high percentage of users.

The link provided above shows that no true phone has a width as wide as 480 pixels, with all newer phones in the 360-414 pixel range before zoom settings are applied, so designing to a 480 pixel width makes little sense to me. I believe that a reasonable percentage of mobile users including older phone users and reading glass users will have phone or phone settings that make their effective resolution as low as 320 pixels, so that is the safe value we will use.

While reasonable designers can disagree over this safe level, I don’t think anybody would argue that 480 pixels is safe, so it would be nice to have a more reasonable XS builder value, and ideally a customizable one.

Thanks again for the great tech support!

#6

You’re welcome!
We’re glad we were able to help you out.

#7

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