Archived topic
Stick button to bottom of container
3 replies · Started by Tobias on January 11, 2022
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
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
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;
}