Jump to content

Why does website layout change when size of screen changes? How do I prevent it?

Recommended Posts

Posted

Site URL: https://www.heartstringpictures.com.au/

Hi guys,

How come when I change the size of my website window on my computer it drastically changes the layout of the blocks on my page? I'm finding it really frustrating. Other websites that I have seen don't seem to be affected by this issue at all.

Also is it possible to have text on a page aligned differently on a computer version of the website than on mobile (center alignment on mobile and left alignment on computer for the same paragraph)?

 

image.thumb.jpeg.90f37794424b949c0fcaf987ec4950a6.jpeg

When the screen is smaller it appears ok

 

image.thumb.jpeg.61604c8d88afd5613da52c78a1d098bc.jpeg

Once it reaches a size that is roughly 16:9 everything changes

 

image.thumb.jpeg.ea6f82517aef430a2eb36066cb431949.jpeg

Same as above

 

Any help would be greatly appreciated! 😄

 

Cheers,

Harry

  • Replies 1
  • Views 1.9k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Posted

Hi Harry, you might want to try keeping your text in one block rather than splitting them up. That said you'll still get some variation in layout but adjusting the image to fill can improve the layout. It can also be a good idea to design and edit in an intermediate screen size, and the 24 column layout applies for screen resolutions between 750px and your maximum page width.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.