Canvas Support

Grid issue: Columns equal height but with gutter/margin between

2 replies·opened May 1, 2018
A
agent8designMay 1, 2018

Hi,

I'm trying to achieve a layout with three columns across the page with equal height and gutter space between each column.

I've tried both the Canvas Grid which gives the gutter I need to achieve. But I then can't get the equal height bit to work. You end up with a variation in the
height of the columns.

If I switch to using the Bootstrap grid I can achieve equal height but lose the gutter between the columns.

Is .common-height class a Bootstrap only bit of code or is there something similar I can apply to the Canvas grid? I tried this with the Canvas Grid but couldn't get it to work.

Can you point me in the right direction?

Thanks,
Nick.

A
agent8designMay 1, 2018

Was going to post a link and Jpeg but couldn't see how to do that privately in my first post.

Attached is a Jpeg of the design I'm trying to create.

And here is a link to the test homepage I'm working on with the Bootstrap Grid in place:

http://testpod.co.uk/zok_htmlsite/

Thanks,
Nick.

S
SemiColonWebSTAFFMay 2, 2018

Hello,

It is still possible to have the Gutters with the Bootstrap Grid. Consider using the following code: 

<div class="row clearfix common-height">

	<div class="col-lg-4 dark">
		<div class="col-padding" style="background-color: rgb(27, 69, 155);">

		<h3>ZOK | <span class="zokgreen">INNOVATION</span></h3>
		<h2>Bio-degradable formula for all gas turbine engines</h2>
		<a href="#" class="button button-border button-white">READ MORE</a>

		</div>
	</div>

	<div class="col-lg-4 dark">
		<div style="background: url('http://testpod.co.uk/zok_htmlsite/images/home_bg_01.jpg') center center / cover no-repeat; height: 100%;"></div>
	</div>

	<div class="col-lg-4">
		<div class="col-padding" style="background-color: rgb(207, 222, 228);">

		<h3>ZOK | <span class="zokred">QUALITY</span></h3>
		<h2>Approved by all major gas turbine manufacturers</h2>
		<a href="#" class="button button-border button-white">READ MORE</a>

		</div>
	</div>

</div>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard