This thread is resolved. Here is a description of the problem and solution.
Problem:
A Layout has a row with two columns. The columns have background colours and should be equal height, but typically one column is shorter than the other and the background colour does not extend to the bottom of the row.
Solution:
Simply applying display: flex to the parent row will by default make the child columns expand to the full height.
The Layouts grid is based on the Bootstrap 3 grid and doesn't use flexbox, so you just need to be careful to use a media query to add the style rule or it will break the collapsing of the grid on smaller screens.
So, you'll need to edit your Layout and add a class name to the row where you want the child columns to be of equal height, e.g. a class name of "equal-height".
Then add the following custom CSS:
@media ( min-width: 1200px ){
.equal-height {
display: flex;
}
}
Your media query may need to be different depending on your Layout.
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
This topic is split from https://toolset.com/forums/topic/i-want-image-to-expand-to-full-width-of-row-it-is-contained-in/
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| - | 7:00 – 14:00 | 7:00 – 14:00 | 7:00 – 14:00 | 7:00 – 14:00 | 7:00 – 14:00 | - |
| - | 15:00 – 16:00 | 15:00 – 16:00 | 15:00 – 16:00 | 15:00 – 16:00 | 15:00 – 16:00 | - |
Supporter timezone: Europe/London (GMT+00:00)
This topic contains 2 replies, has 2 voices.
Last updated by 6 years, 2 months ago.
Assisted by: Nigel.
