Jump to content

Having trouble with the zoom on my mobile site

Recommended Posts

Hello! Was really hoping to get some help with my mobile site!

Everything is set up the way I'd like on desktop and mobile, however, on mobile/iPhone I'm having to zoom out on the page to 85% in order to see everything correctly. How can I set up just site to load at 85% zoom or preferably, to fit correctly at 100% zoom. Ive tried to mess with CSS coding, but I'm just not familiar enough yet to figure it out in time. Any help is sooo appreciated!The first image shows the view at 85%, with the button and shapes lining up. The second image is at the default 100% but shows the lines are off and the circle is warped to an oval 

IMG_1943.PNG

IMG_1944.PNG

Edited by Khalilypad
missing info
Link to comment
  • Replies 3
  • Views 406
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

You have a highly stylized site that doesn't scale between aspect ratios. Your font is so large that individual words extend out of the display area, causing your content to be larger than the mobile screen. Effectively, you have to scale the site down to 85% because it's stuck at 115%.

You need to adjust your font sizes on mobile and/or set max widths for certain blocks. For example, if you bring the mobile font size down enough that the words over the circle are about as long as the screen is wide, the circle shouldn't get so distorted.

You'll have to play around with it. Not to link drop and run, but this is why we wrote this quick introduction to formatting mobile screens with CSS.

Link to comment
12 hours ago, qosmic said:

You have a highly stylized site that doesn't scale between aspect ratios. Your font is so large that individual words extend out of the display area, causing your content to be larger than the mobile screen. Effectively, you have to scale the site down to 85% because it's stuck at 115%.

You need to adjust your font sizes on mobile and/or set max widths for certain blocks. For example, if you bring the mobile font size down enough that the words over the circle are about as long as the screen is wide, the circle shouldn't get so distorted.

You'll have to play around with it. Not to link drop and run, but this is why we wrote this quick introduction to formatting mobile screens with CSS.

Could you guide me on the sorbets steps I’d need to take to adjust font size and widths? I figured my problems lied somewhere near that, but I’ve messed with the code to no avail

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.