Scaling issue too zoomed in

Store Design
, ,
1

Website scaling issue:

I need the entire website to appear more zoomed out without affecting the spacing of the elements on the page

I would like it so more of the page is visible at any time. Currently it takes 8/9 scrolls to reach the bottom of our site - we would like this to be reduced by half if possible

Please could someone help me resolve this

2

Hey @katlinmayy,

Yes I can help with this to fix the issue.

Could you please share your store url and password [If applicable] so that I can take a look and provide you with the solution code.

Thanks

3

Hi @katlinmayy

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

4

You can achieve this with a CSS scale transform applied to the <body> (or main wrapper), but you’ll also need to adjust the transform origin so the site doesn’t get cut off. For example:

body {
  transform: scale(0.8);
  transform-origin: top center;
}

This will “zoom out” the entire website visually, making more of the page visible without changing your actual spacing in the code.

:warning: Keep in mind: scaling can affect readability and sharpness, so test across devices. Another cleaner option would be to reduce padding/margin in sections through the theme editor or CSS instead of scaling the whole site.