[Resolved] Help with Grid

[Adrien]

Dear Team,

I have the same Dashed wireframe as GP Website. But i’m facing an issue with my Grid and Im not able to replicate how you did with GP to have this:

gb-inside-container {
padding: 0 30px;
}

So that my inner containers have a left and right padding of 30px to that they don’t overlap the dashed wireframe.
I’d like to do the exact same thing.

The way I did right now but im not satisfied was to apply a 60px horizontal gap on the Grid column

.gb-grid-wrapper-e0a61705 > .gb-grid-column {
padding-left: 60px;
}

Could you please help me fine tune my grid the same way as you did with GP?

Appreciate your help.

[Ying]

Hi Adrien,

It looks like you have a -60px margin left applied to the Grid:
https://www.screencast.com/t/BNszG1MrD

Without this negative margin, I don’t think the 60px horizontal padding is needed for your Grid items.

Let me know if this helps 🙂

[Adrien]

Hello Ying,

This is actually coming from the Grid horizontal gap. I’ve set 60px. This is exactly what I want to get rid off but when I remove it, I loose the alignment of the 2 column container. It touching the dashed wireframe.

So basically id like to remove this Grid horizontal gap and replace it like GP Website with a

gb-inside-container {
padding: 0 30px;
}

Thank you for your help.

[Fernando]

Hi Adrien,

If that’s the case, to replicate the Grid in the GP site, can you try removing the Horizontal Gap you’ve set?: https://share.getcloudapp.com/X6uEBAxg

Then, try setting for each Container Block in the Grid Blocks the padding as such: https://share.getcloudapp.com/wbuzr6oW

Kindly let us know how it goes. Hope this helps! 🙂

[Adrien]

Hello Fernando,

Thank you very much. I’ve done what you said but It can’t be that because it will overload my page with repeated code for each container block within a container block. Mover over when you compare the code of GP website :

.gb-container-6b50b64e>.gb-inside-container {
padding: 0 30px;
}

Mine is this with your method:

.gb-container-79acebbe > .gb-inside-container {
padding-right: 30px;
padding-left: 30px;
}

There’s something we are missing here.

[Fernando]

I see. If that’s what you want, here is a code you may try that will cover all container paddings for this specific section:

.gb-container-9138692a > .gb-inside-container > .gb-grid-wrapper > .gb-grid-column > .gb-container > .gb-inside-container{
    padding: 0 30px;
}

Alternatively, a more likely better action would be to create a custom CSS class which we can target to alter the spacing as such: https://share.getcloudapp.com/v1uglYGo

Then, we can add the code:

.add-my-padding > .gb-inside-container{
    padding: 0 30px !important;
}

Through this process, you can add this class to any Block you wish to add 30px of left and right paddings with.

Adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

Kindly let us know how it goes. Hope to hear from you soon! 🙂

[Adrien]

Dear Fernando, Thanks a lot! Is this how GP Website was done? Through a class within each sub-container?

[Fernando]

No it isn’t. It’s made through the same steps I first provided. 🙂

For it to go shorthand,

from this:

padding-right: 30px;
padding-left: 30px;

into the shorthand version:

padding: 0 30px;

you would need to set the padding as such: https://share.getcloudapp.com/9ZumPRrk

As shown, all values are filled. 0 30 0 30.

Hope this clarifies. 🙂

[Adrien]

Dear Fernando,

I’m sorry. I don’t think its done like this because the CSS output is different.

Thank you very much. I’ve done what you said but It can’t be that because it will overload my page with repeated code for each container block within a container block. Mover over when you compare the code of GP website :

.gb-container-6b50b64e>.gb-inside-container {
padding: 0 30px;
}

Mine is this with your method:

.gb-container-79acebbe > .gb-inside-container {
padding-right: 30px;
padding-left: 30px;
}

There’s something we are missing here.

[David]

Hi there,

this:

.gb-container-6b50b64e>.gb-inside-container {
    padding: 0 30px;
}

is how OLD GB worked and although the shorthand means less CSS it created a problem when GB Pro Global Styles are used.

In GB a user can add a Global Style and they can also apply local styles in the editor that compliment or override the global style.
But using Shorthand properties broke that feature.

So we now use individual CSS properties for things like padding.

[Adrien]

Ah okay. Thank you David.

[Adrien]

Resolved

[David]

You’re welcome

[Author]

Posts