[Resolved] gb-grid-containter class shadow

[Chris]

Hi

I need to create a shadow around the containers within a Generate Blocks grid. I’ve done this using CSS but the container for the page also has a shadow.

I’m using this CSS.

/*Gives containers shadow*/
.gb-container {
border: 1px solid #c9e4e1;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
transition: all 0.1s ease-in;
border-radius: 3px;
box-sizing: border-box;
padding: 10px;
}

Can you have a look please and see if you can figure out why.

I created a website a couple of months ago and this problem doesn’t happen with that.

[David]

Hi there,

to target just the containers inside a grid instead of:

.gb-container {

use:

.gb-grid-wrapper > .gb-grid-column .gb-container {

[Chris]

Cheers David, I’d have never have got that, LOL

[David]

haha – glad to be of assistance.

[Chris]

Quick one I bet David. Now that my CSS is no longer relating to ‘container’, there’s no gap in between the containers. I’ve tried putting a margin in but it pushes the 4th container on to another line. Do you have a ‘document’ in the help section to help understand this? Or if not, the CSS?

[David]

If you select the Grid parent container you can increase or reduce the Horizontal / Vertical Gap:

https://docs.generateblocks.com/article/grid-overview/#editing-our-grid-block

[Chris]

That doesn’t create space between the containers though David.

[David]

Oops my bad – i changed the selector here

[Chris]

LOL, too easy. Thanks David, you’re a star, have a good weekend.

[David]

You too!
I am off for some coffee lol

[Author]

Posts