[Support request] Stick button to bottom of container

Home Forums Support [Support request] Stick button to bottom of container

Home Forums Support Stick button to bottom of container

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2076446
    Tobias

    Hi,

    I would like to stick the button of a container to the bottom, so the buttons will be horizontally aligned. I have added the url in the personal notes.

    Looking forward to another helpful answer. Thanks!

    Tobias

    #2076502
    David
    Staff
    Customer Support
    #2077635
    Tobias

    Thanks!

    Should this work as well when adding this class “align-last-element” to the grid in a Global Style I made?

    That is highly preferred. The Global Style is called ‘top-producten’. But on the page itself where I use a grid with the Global Style it does not seem to take over the class “align-last-element”. So it does not show the aligned buttons.

    So shortly said
    – It does work when I add the css class to the grid on the page itself.
    – It does not take over the css when I add it to the Global Style that I use on multiple pages.
    (I double checked: the grid on the page is using the Global Style)

    I have added the code to the “extra css field” in Generatepress customizer.

    This code:

    .align-last-element .gb-grid-column>.gb-container>.gb-inside-container {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .align-last-element .gb-grid-column>.gb-container>.gb-inside-container>*:last-child {
        margin-top: auto;
    }

    Best Regards,
    Tobias

    #2077762
    David
    Staff
    Customer Support

    A GB Local Template would store the Additional CSS Class you added to it.
    But not a Global Style as all that is doing is saving some CSS rules with your global style name.

    You can of course use the global styles selector.
    In your case the selector is: gb-grid-wrapper-top-producten
    And we just swap it for the align-last-element like so:

    .gb-grid-wrapper-top-producten .gb-grid-column>.gb-container>.gb-inside-container {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .gb-grid-wrapper-top-producten .gb-grid-column>.gb-container>.gb-inside-container>*:last-child {
        margin-top: auto;
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.