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!
I’m having problems with rows not having equal heights. Some of the contents are a little longer than others. I’ve tried setting the Cell Vertical Alignment to Stretch but it still doesn’t work. I’ve also tried workarounds like setting it to a table and using the flex method to no avail.
Any idea on how to fix this?
Here’s a screenshot:
Hi Sheryl
Do you have a public URL where we can take a look at what’s going on?
Thanks
Thanks for getting back to me!
The page is currently styled for the new theme I’m doing which isn’t live yet. So now the page shows it on the old theme which is why it looks messed up with the spacing. But the problem is still there which you’ll see starting on the 2nd row.
This is the link: http://raymondjbarry.org/film-tv-2/
Hi Sheryl,
I’ve had a look at your website and the reason why the Cell Vertical Alignment didn’t work is that the cell contents aren’t, stretched, the cell is stretched. This means that unless you’ve specifically set up your cell with a background color, border, or something like that, you won’t actually notice the cell being stretched. Does that make sense?
Please note that the cell alignment occurs on a row by row basis. This means that if you want the text widget in the first cell to be the same height as the text widget in the second and third cells, you’ll need to add these widgets to a dedicated row with solely those three widgets as the Cell Vertical ALignment is based on the cell height, not the contents. Does that make sense?
Ohh yes I think I understand. However another problem I encountered that’s why I didn’t do them in individual rows is, when on mobile/tablet screens and only 2 photos can fit in a row, the 3rd photo will go down and the next row will be below that. To illustrate, it goes:
1 2
3
4 5
6
That’s why I put them all in one row. Can you think of any solution to make the photos continuous on smaller screens like how it is now? But on desktop they’re all the same height?
Hi Sheryl,
You can disable the row collapse by opening the row and head over to the row styles sidebar. Open the Layout settings group and set the Collapse Behaviour to No Collapse. You’ll need to repeat this setting adjustment on a row by row basis.
You could also globally disable the SiteOrigin Page Builder Responsive Layout but this may cause general responsive layouts – I would only recommend doing this if you would rather not adjust the Collapse Behaviour setting on a row by row basis. Regardless, to do this please navigate to WP AdminSettingsPage Builder and open the Layout tab.
I would still like to keep the responsive layout, but at the same time have the thumbnails continuously collapsing as well. Is there a way around this?
Hi Sheryl,
Yes. The collapse behaviour is what you’re looking to avoid – collapsing, in this case, is when the image appears on the next line. You’ll need to set the Collapse Behaviour to No Collapse on a row by row basis if don’t want the image to go onto the next line.
Yes but the problem is:
If I separate 3 text widgets into separate rows, the cell height is the same but on smaller screens they are not continuous. If I use the no collapse behavior, all 3 will be on the same row which doesn’t make it responsive anymore (when I’d like 2 on tablet size and 1 on mobile).
If I keep them all in the same row, I can use the no collapse behavior however they won’t be the same height.
Hi Sheryltan,
Thank you for clarifying. So the set up is as desired expect on tablet it has the third cell on the next row. That’s sadly unavoidable as it’s not possible to have the other rows fill in that spot unless you had all of the widgets in the same row. This obviously has the major disadvantage of not being able to use Cell Vertical Alignment so you need to decide on which you would prefer.
With that said, you have the option of completely disabling the Tablet layout and instead of having the Mobile Layout showing – one per line. You can do this by navigating to WP AdminSettingsPage Builder and open the Layout tab. Untick Use Tablet Layout.