Photo with Text Grid responsiveness

[aenahbanana]

Hi There!

I wanted to create something similar to this one > https://snag.gy/7NjoZc.jpg

I have created a section with 4 columns, it looks good on desktop but once on tablet/mobile, the boxes turns to rectangles. How can I make sure that the photos and text box retain a square shape?

Thank you!

[basanta]

Hi There,

Thanks for the info!

The column height always depends on the content you have. It’s hard to keep it square always.
In another column, you have the square image so it will take the shape of the image.
I have added some padding to the text column in percent value and gap element on top and bottom to maintain the gap.
Please the settings, you can do the further adjustment to match your need.

Thanks

[aenahbanana]

Hi There,

I see what you mean…

Is there’s a different way to implement this? Something that will make it stay as a square?

Thank you!

[Alaa]

Hi,

If you are sure your images will be of 500px height, then you can add this custom CSS code to this specific page content CSS in Cornerstone:

@media (max-width: 767px){
    .x-column {
        min-height: 500px;
    }
}

However, you will encounter another issue that the content will not be aligned vertically in the center, the workaround is to adjust the top margin value of the first element.

Thanks.