[Resolved] Set background color of one half of a grid

[Joseph]

I was wondering if there was a way to set background color of one side of a grid? I want to set a two column grid, left and right, 50/50. Left side will be white, right side will be colored.

But I also want to set the container to be less than full width. When I do that, the right side that is colored, will not have the background color fill the entire right side.

I want to achieve something like this:

https://baderscott.com/

right under the hero section, is the free consultation/case results section. I like how those two sections are not full width, and you can resize the browser without effecting the size of the items until it is less than the contained width. On my site, the sections are way too wide, especially the form.

[Joseph]

Kind of figured out a really convoluted back-door way of doing this, but was hoping to hear if there was a cleaner way.

Basically put a container within a container. So its a grid. Each grid has a container 1, then another container 2.

Container 1 has the background color. Then I put container 2 inside of container 1, and apply this css:

@media (min-width: 768px) {
    .gb-container.left-side-grid {
        margin-left: auto;
	margin-right: 80px;
	max-width: 600px;
    }
}

@media (min-width: 768px) {
    .gb-container.right-side-grid {
        margin-left: 80px;
	margin-right: auto;
	max-width: 600px;
    }
}

To get it to look right I had to play with the padding on the container blocks. I think it looks okay, even if very complicated. Wondering if there was a cleaner way (like CSS to address the grid itself)

[Leo]

Hi there,

I’m a little bit confused.

If you create a grid, then there would be two containers inside of that grid, then you can set a background color for one of the containers.

We shouldn’t need to use CSS at all.

Am I missing something here?

[Joseph]

Leo, because I don’t want the stuff I put inside that container to be set by padding. If I go say, 80px all the way around for padding, the items inside stretch and as you resize the browser, the item (in this case a contact form) stretches and shrinks. I wanted it to have a max-width of say, 500px or 600px, but be anchored to the left side (with 80px padding). That way, as long as the browser is wider than the minimum width, the form doesn’t continue stretching. It only shrinks when the browser is less wide.

On a wide screen, go to https://baderscott.com/ and resize the window back and forth. Notice the contact form right below the hero doesn’t resize after a certain point.

When I use a max-width css on the first container inside the grid, the white background shows behind it. So my solution, for now, is to set the background container on the first container. Then another container inside of that one, with my form.

[Leo]

Ok glad you found a workaround.

[Author]

Posts