Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
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.
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
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.
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
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.
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?