Padding between marginless columns

[johnrooney]

Hi Guys,

I’m hoping you can help me with something with the site: http://testing.johnrooneydesign.com/wp/

Under the video the homepage there is a red and grey box. I need those two boxes to remain the same size relative to each other. while the text resizes inside. The only way I can get them to stay the same size in height is to create a row with a marginless columns inside.

Now, I would like to have a 20px gap between the red and the grey boxes? When I apply padding, the padding is the same colour as the boxes (which are columns with a background colour)

Would you have any suggestions?

[johnrooney]

This is the effect I’m looking to achieve, where the background shape of the boxes can be controlled but the text resize inside without altering the shape of the boxes.

[lely]

Hi There,

This code snippet will help you achieve that:

Use Flex Layout | Themeco Docs

With that code, no need to use MARGINLESS column.

Hope this helps.

[johnrooney]

Thank you so much for sending that on, but can I ask you a couple of stupid questions?

So, where actually do I put that code? Also, I have other pages throughout the site that I don’t want the columns to be of the same height, just those two text boxes. Would I assign a class or ID to them?

Also, the maginless columns allow me to control the white borders around the elements to maintain the tight grid I have around the rest of the images.

Is there anyway I can assign a class/id to the those two columns, and have the padding/margin actually in a specific colour (like white) with CSS?

[ruenel]

Hey There,

Thanks for updating in!

You will have to place the code in the Cornerstone’s page Custom JS and insert the js code.

You can always insert a custom column ID or class. In your column settings, find the “Customize” tab and there you can find the fields.

Hope this helps.