Hi @Symbiosis,
Thank you for writing in, yeah about that new Flexbox for Rows and Columns feature, I see that you have the previous versions of Rows, regretfully the new Flexbox for Rows is only available to the new generation of Row, the previous generation row elements will always work as they have. You don’t need to do anything. There isn’t an automatic conversion process, so if you wish to use the new Row element you will need to add it to your page, select the appropriate number of columns, and manually move all the elements over.
Read more about the Release Notes - Pro 3.0, X 7.0, Cornerstone 4.0 here.
If your Cornerstone/Content Builder still giving you the previous version of Row as default, but you want the new Row as the default moving forward, please see this guide here.
Ok now to your issue, actually the problem there is your Gap element because on big screens the image element reach its max-width (and height) while the Gap element continue growing (it even create a large space under the text on mobile view). To resolve this, please remove those Gap elements, then add this to your Page > CSS area
@media (min-width: 768px) {
.flexbox-row {
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
align-content: stretch;
}
}
Then apply the CLASS flexbox-row to the ROW of the columns that you want to have equal height. This is the power of CSS flexbox that we put on the new generations of Row, so you don’t need this CSS on those new ROW.
Hope it helps,
Cheers!
