Home>Support>Image re-size issues with Image widget

Image re-size issues with Image widget

Hi there,

I have a problem with images not always resizing correctly when the browser is not full screen. Please see the two pages below.

The first page is using the image widget within the Layout widget and the second page is just using the image widget.

TILLER Timber Upholstered Chairs

TILLER Upholstered Stools

There will always be one image that does not resize correctly. The images are set to Full. Bound and Full width are both ticked.

Any help you can give me is appreciated.

Thanks,
Layla

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 3 months, 8 days ago Aaron Evans Hi, I Work Here

    Hi Layla

    Thanks for posting. Could you perhaps take a screenshot of the image and upload it to a site like http://imgur.com or a sharing site of your choosing. At the moment, we’re unable to replicate the issue.

  2. 3 months, 4 days ago layla shomaly

    Hi there,

    Please see the image links below. As mentioned this is only happening when the browser is re-sized

    http://www.didier.com.au/wp-content/uploads/2019/07/Image-1.jpg

    http://www.didier.com.au/wp-content/uploads/2019/07/Image-2.jpg

  3. 3 months, 4 days ago Aaron Evans Hi, I Work Here

    Thanks for the screenshots. The result is, unfortunately, expected. On this page, I can see the issue without resizing. Although the images have the same intrinsic height they are resized to fit in their cell widths. At normal screen resolution, the image on the left has a height of 428.38px and the image on the right, 424.11px. When you make the screen size smaller, the difference becomes more noticeable.

  4. 3 months, 4 days ago Alex S Hi, I Work Here

    Hi Layla,

    It’s possible to stretch cell backgrounds to be the same height using Cell Vertical Alignment so that may be a way of achieving the desired results.

    Open the page you’re working on and add a new row. Size the columns the same size as they for the row with the two images that need to be the same height. Go over to the Styles sidebar on the right and open the Layout settings group. Set the Cell Vertical Alignment to Stretch. This row won’t have any content so we need to use Padding to give the row height. Set the Padding to Padding to 380 0 0 0 px – this can always be adjusted later.

    Select the first cell (avoid clicking the percentage amount or you’ll enter resize mode) and then go over to the Styles sidebar. Scroll down to Cell 1 Styles and open the Design settings group. Set the Background Image to image that’s meant to be on the left. Select the cell on the right and then give that cell the image that’s meant to be on the right.

    Close the row and add a Text widget to both of the cells in the newly created row. Leave this widget empty. Save. How does that look?

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More