Streaming live at 10am (PST)

Make column background full length


I’m creating a landing page which includes two columns, each has a background image. How can I cover the white space at the bottom and make sure the images cover the screen’s hight without stretching them?

I played a bit with padding and margin, but don’t think this is a correct practice.

Here is my site Read-Only: LINK


Thanks @vincent. This worked! My only issue now is that whenever I change the positioning of elements inside the columns, it overrides the fix.

OK, you’re going to undo things a bit and redo them. Espacially one thing:

Remove any styling you could hvemde on the Column elements, and never touch them again. Inside of them, put a div called “columns content”, and put the content inside of it. Make this div 100% width and height. Now use this div to make it felxbox and manage your content es you like.

Take this as a rule: never style columns. Also do it for Containers elements. Always put a content div inside of them and NEVER style them directly.

1 Like