Legionsites

Documentation

Making Images Responsive

When adding an image into the Page Editor, the editor will assign a pixel width and height to the image. You can see this when you right click on an image and view the Image Properties. The default behavior of assigning an image a pixel size prevents the image from getting smaller on a mobile phone-sized screen, which causes the entire web page to be wider then the screen on smaller devices. The screen size for a Legionsite web page can be as small as 320 pixels wide on  a phone, to 1200 pixels on a desktop computer. Basically, any image that is greater than 320 pixels in width will prevent a website from fitting well on a phone. The main solution to this problem is to use percentages to size the image rather than pixels.

1695599411-1.webp

Right click on the image, then select "Image Properties"

1712332656-1.webp

Remove the width and height values.

1695599608-1.webp

Click on "Advanced," and under the "Style" input add the width as 100%, and a max-width of the desire pixel size.

This "Style" input is used for additional styles. The max-width setting sets an upper limit and prevents the image from increasing beyond that width. The 100% will then allow the image to shrink as the screen width dimension decrease as well. A height setting is not needed as it will automatically resize proportionally.