How to make your Website Images stay in Place, no Matter the Screen Size

April 23, 2024

Prefer to watch (in German)?

Why horizontal locking is important for your website

When you create a website your visitors can access it from their phone, laptop, tablet, or desktop computer. Showit lets you adapt your design to a mobile and a desktop version to make your website look great a different screen sizes, so, that’s the basic distinction between desktop and mobile.

However, there are also different sizes when it comes to mobile devices, and there are different sizes when it comes to desktop devices. Let’s stay with desktops for a second. There is a huge difference between a 13.3″, a 15.4″, and a 17″ screen! You will especially notice that in the placement of images. Let’s say you want an image to stretch all across your screen and you size it according to a 13.3″ screen. If someone views your website on a 17″ screen, the image will not stretch all the way across, because the screen is wider. There will be a strange gap on each side of the screen, as you can seen in the example below.

This is the way I designed it, with the image stretching all across:

This is the way it looks on a larger screen. See the gaps on the side? The header stretches all the way across but the image doesn’t:

And that’s why where horizontal locking comes in!

Stretch to fill

If you want to stretch the image to fill the entire screen side to side no matter how big or small your screen, click on the image, go to SIZE & POSITION (on the right) and choose the option marked in red:

Stretch from a fixed point to the edge of the screen

If however, you have an image that you want to go from a certain point on the screen (in my example below the white line) all the way to the edge of the screen, choose this option:

Stick to one side of the screen

The last way of using horizontal locking is if you want an image sticking to one side of the screen without it stretching, like the image of the woman with the hat: