Best way to make a square box layout?

Support
#1

Hi there, I’m trying to figure out the best way to make a website that uses 2 columns but using equally sized and spaced squares…

an example is :slight_smile:

About a quarter of the way down it goes to a section with squares.

similar design on the apple site: https://www.apple.com/ca/
about half way down.

Thanks

#2

Hi @overlagsen,

Thank you for reaching out to us. I believe you’re looking for something like this http://demo.theme.co/integrity-1/ if you’re using X then you can import the Integrity 1 standard demo via X > Validation > Demo Content and make edits as per your need.

However if you need to design it in Cornerstone then you can simply add a section and then choose two column layout:

Then inspect your Row and turn off the Inner Container and turn on the Marginless Columns,so you have equally sized columns.

You can then add background to your columns or just give background color and drop elements in the columns as per your need.

Hope this helps!

#3

How do I ensure the image on one side and text beside it are the same height? Ideally locked square…
thanks

#4

Hi There,

Please add this inline CSS to your row: display: flex;

Result:

Hope it helps :slight_smile:

#5

Perfect thanks so much…

Is there any way to centre the Text vertically within the column? If I add gaps when the screen is smaller it moves and is no longer centrered.

thanks

#6

Hey @overlagsen,

I’m not sure what you mean by “it moves and is no longer centrered”. Would you mind recording a screencast?

Centering an element perfectly is certainly achievable using custom CSS but regretfully, we would be veering into custom development because you’ll need more code if we go with that method and that is outside the scope of our support.

Please follow the setup in this screencast instead. Gap elements should also work and the added benefit of using gaps is you can hide it based on screen size because it has Hide During Breakpoints option.

Hope that helps and thank you for understanding.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.