Mobile Breakpoint Incorrect

Support
#1

I am using the latest version of Pro. I’ve been using the mobile phone preview inside the content builder. It is incorrect and set too large. All my pages fail to render correctly on mobile. The heading text and other elements that should be responsive to phone break points continue outside viewable area. The Pro/Cornerstone breakpoint for phones is set to 480px and it should be set to 375px. This make the phone breakpoint useless for previewing a design.

#2

Hi @ehsd,

Thank you for reaching out to us. I tried to check your site associated with your Pro license but it’s password protected at the moment. To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:

Best of luck!

#3

I’ve added a secure note.

#4

Hi @ehsd,

Thank you for the credentials, I did check your site and I don’t see issue with regards to the mobile-breakpoint, the extra small preview is 480px and smaller that includes the 375px screens. If you need to adjust your overall font-size on extra small view, please navigate to Theme Options > Typography and reduce the Root Font Size for XS screen.

Hope it helps,
Cheers!

#5

Viewing on an actual phone will show the issues. Or viewing in the Firefox or Chrome devtools mobile emulator. I’ll see if changing the root font size has any impact.

#6

Hi @ehsd,

I wonder if you are talking about the headline elements that you used? Such as the one below:

Screen Shot 2020-03-17 at 14.05.25

If you want to have a smaller font for the headline elements or whatever element that you use you need to set up the font in a responsive way and avid using fixed sizes. You either need to hide the headline for mobile and copy the headline and show it for mobile and have a smaller font size using the Hide/Show feature or us the method below:

Thank you.

#7

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