[Resolved] Help with Grid

Home Forums Support [Resolved] Help with Grid

Home Forums Support Help with Grid

  • This topic has 12 replies, 4 voices, and was last updated 5 months ago by David.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #2153389
    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.

    #2153397
    Ying
    Staff
    Customer Support

    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 🙂

    #2153408
    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.

    #2153432
    Fernando
    Customer Support

    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! 🙂

    #2153439
    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.

    #2153459
    Fernando
    Customer Support

    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! 🙂

    #2153472
    Adrien

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

    #2153542
    Fernando
    Customer Support

    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. 🙂

    #2153658
    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.

    #2154235
    David
    Staff
    Customer Support

    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.

    #2154471
    Adrien

    Ah okay. Thank you David.

    #2154473
    Adrien

    Resolved

    #2154519
    David
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.