Menu icon Foundation
Can this be done with grids?

Hi everybody,

I have a simple 9-3 columns grid.
Is it possible to have their background color expand to the edge of the viewport?
Any idea's on how to tackle this problem?

Thanks! :)

Problem

Hi everybody,

I have a simple 9-3 columns grid.
Is it possible to have their background color expand to the edge of the viewport?
Any idea's on how to tackle this problem?

Thanks! :)

Problem
Christian Magill over 3 years ago

Here's an example of one way you could tackle the problem... You are essentially are using a pseudo element of matching color and bleeding it out of the container through absolute positioning.

I have set a slight transparency on the pseudo elements so you can see them at work.

http://codepen.io/christianmagill/pen/Rrdwzm

hector_sapien over 3 years ago

Nice and creative solution!
Thanks!

hector_sapien over 3 years ago

I just noticed this isn't 100% working because I do have some horizontal scrolling.

Christian Magill over 3 years ago

You could use a container with overflow hidden to fix this.

http://codepen.io/christianmagill/pen/Rrdwzm