Streaming live at 10am (PST)

Gutter/Space between columns


#1

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


#2

Hi @Matty, thanks for your post 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?


#3

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


#4

Hi @Matty, looks like you almost have it 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


#5

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


#7

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


#8

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


#9

Hello @cyberdave

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

Best regards,
Matt


#10

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 smile http://quick.as/8qlbi6m5a

Cheers, Dave


#11

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