Problems with Full-Width Images, Scaling and Cropping in Sitely

Question
1

Hello everyone,

I am currently testing Sitely and considering purchasing a subscription, because I really like the overall concept and the design approach so far.

However, I am struggling with image handling and page layout behavior right at the beginning, and I am not sure if I am missing something fundamental.

Here is my issue:

  • When I start with a blank page and insert a photo/image, the available width seems limited by guidelines/margins on the left and right side.

  • I would like to freely define the size and position of the image, especially for banner/hero sections.

  • When I place the image inside a wide box/container, the scaling behavior is confusing.

  • If I use “Scale”, the image stretches to the full width, but then I cannot resize it freely anymore.

  • In preview mode, the lower part of the image gets cropped/cut off.

  • If I manually extend the page downward to avoid the cropping, I end up with unwanted empty space/gaps between sections.

  • Because of this, I currently cannot create a seamless full-width banner with another section directly attached underneath.

I would really appreciate any advice regarding:

  • proper workflows for full-width hero images,

  • image scaling behavior,

  • preventing cropping in preview mode,

  • and how to create seamless sections without unwanted spacing.

Maybe I am approaching this the wrong way, but currently I find image handling quite difficult compared to other website builders.

Thanks in advance for any help.

2

Hello axko, I do realize you may have already looked at the help section. The documentation is really quite extensive and helpful on working with images. If you have not looked at it you may find that helpful. You can also send a note to Duncan directly at feedback@sitely.app. He is always very helpful and answers quite quickly.

3

When you add an image to a web page, the image is always placed inside some kind of container - for example a box, placeholder, or wide/full-width image area.

The Fit and Fill options simply tell Sitely how the image should behave inside that container.

  • Fill makes sure the entire container is covered by the image.
    If the image and container have different shapes (aspect ratios), parts of the image may be cropped off to avoid distortion.
  • Fit makes sure the whole image is visible inside the container.
    Usually the longest side is adjusted to fit first, while empty space may appear around the shorter side.

Both options are designed to keep the image looking correct and prevent stretching or distortion.

If you’re using a normal image box or placeholder, you can manually resize both the image and its container by dragging the handles. However, you can only scale within the page boundaries - you can’t drag the object wider than the page itself.

A Full Width Image works differently. In this case, the browser window controls the width automatically. Because of that, you can only adjust the height of the image area in Sitely.

This also means that different visitors may see slightly different portions of the image depending on the size and shape of their browser window or device screen. Wider screens will reveal more of the image horizontally, while narrower screens may crop more of the sides.