Gutter/Space between columns

Good morning all,

I’m having an issue with trying to add some space between my 3 columns, I was reading some old posts saying its not possible to add margins as it will mess up the grid system. However others seem to have done a work around.

https://preview.webflow.com/preview/dlux?preview=61794315af9c601c95a7be039ef9b75b

You will see bottom of my page I’ve created 3 columns with white background, but would like to split them up to leave a gutter next to each.

Best regards,
Matt

Hi @Matty, thanks for your post :slight_smile: Here is a suggestion:

Add a div block to each column and give it a class name, like “content block”, give it 100% width and height and fill color of white

Next remove the fill color of white on the we work col class.

Is this the effect/layout you are going for?

Hello Dave,

Thanks for the reply, I’m just trying the method which you said however when I make those changes I’m not getting the full white background like yours?

Best regards,
Matt

Hi @Matty, looks like you almost have it :slight_smile: Just put the paragraph element inside of the div block. Try that and let me know how it goes :smile:

If you want some more padding between the inside border of the white div, then add padding to your content block.

Cheers,
Dave

Thanks a lot Dave, worked a treat. I owe you a beer!

1 Like

Hello @cyberdave

Under the “we work” section where I’ve added the 3 white columns I view the website in mobile device and everything is aligned in the centre fine, however when I actually view it on my mobile phone it looks nothing like how webflow shows it.

I’ve attached screenshot.

Best regards,
Matt

Hi @Matty, thanks for the update, I can take a look, what kind of mobile device is it? And you are looking at this url: dlux.webflow.io, is that correct?

Cheers,
Dave

Hello @cyberdave

I’m viewing it on Samsung Galaxy S5, that’s correct I’m using the mentioned URL

Best regards,
Matt

Hi @Matty,

I would check our styles on the topcolimage and the button:

Here is a video to help you align the content within the white divs, I hope it helps :slight_smile: http://quick.as/8qlbi6m5a

Cheers, Dave

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