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].
For some reason, if I put three image widgets side-by-side and put pictures in them, then while the tops of the pictures align with each other, the same thing doesn’t happen at the bottom.
Here’s a link to show you what I mean: http://www.gvzglasshouses.co.uk/topsails-on-orwell/
It seems to me that the widget ought to automatically limit the size of the picture inside it.
Please tell me what to do to make the pictures line up correctly. I’ve been warned by the webmaster to not to change any of the code because the theme has been custom-built.
In any case, this shouldn’t be necessary.
Hi Drbruce,
Okay so basically what’s happening here is that the images are different sizes. We don’t enforce a specific height automatically but you can enforce one by applying some CSS to your page. Please open up the linked page in the editor and open the row housing the three images by clicking the wrench icon above it. Head over to the row styles sidebar and open the Attribute settings group. Set the row class to no-min_height and then click done.
Now open the first image on the left and then open the Attribute widget styles (it’s on the right again). Set the CSS Style field to your desired height – try height: 250px; and then tick the Bound and Full Width settings on the left.
Now repeat this process for the other two images and then save the page. How does that look?
Once you’ve done all that, please navigate to AppearanceCustom CSS and add the following CSS:
@media (max-width: 760px) { .no-min_height .panel-row-style { height: auto !important; } }This CSS will override the height CSS you’ve applied to prevent the automatic sizing of images on mobile devices as it can lead to a large amount of stretching.
You might also need to install the SiteOrigin CSS Editor.
I couldn’t find the first window in your reply.
When I click on the wrench icon, I get three choices: edit row, duplicate row, and delete row. There’s no mention of Row Styles or an Attribute Settings group.
After a bit of poking around, I managed to find the windows in your diagram.
I made the changes you suggested. On five of the pictures, the bottoms still failed to line up. On the top two, I had to remove the height coding, because all it did was make the images bigger, which covered up the text in the post.
So I’m no further than I was when I wrote my original question.
Ideas?
Hi Drbruce,
Okay to elaborate, the I suggested in my last email isn’t a set in stone height. You’ll need to decide on a height depending on the sizing of the images. For example, for the first set of images, I would set the height to 362px. For the second set, I would set it to 237px and so on. You need to work ut the correct height your images need to be displayed at and then enforce that height with the CSS I suggested. Does that make sense?
It makes sense. Not sure what I’ll do.
The thing is that all the images we use have to be reduced in size. Otherwise the site will grind to a halt.
For the sake of quality, the original picture sizes are about 3MB each. But then I run them through picresize.com and reduce them to 500kb. I’m surprised that this causes a problem given the number of plugins that are designed to reduce image size and the stress that SEO-ers place on keeping image sizes small.
Is this problem peculiar to Page Builder? If not, how do other people get around the problem? It must be incredibly time consuming to have to adjust the height for every picture used, given the increased interest in all things visual.
Hi Drbruce,
Basically, to avoid this situation you need to be consistent with your image dimensions. If you intend for the images to be displayed at 250×500, don’t have one of the images have dimensions of 259×600. Does that make sense?
To clarify, applying a height will not affect the file size, only how it’s displayed. Also, Image dimensions (how size of the image when displayed at full size – 250×250 px) aren’t directly linked to file size (the size of the file – 1MB).