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

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)?

When the screen is smaller it appears ok

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

Same as above

Any help would be greatly appreciated! 😄

Cheers,

Harry

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.