Archived topic
Missing/not working bottom-margin of Grid Block in mobile
5 replies · Started by Jon on January 16, 2022
Hello,
I have an issue where the bottom margin between two grid blocks does not work in mobile mode. I can see the margin increase in the editor, but it does not resolve that way when viewed in mobile or in a desktop browser (in mobile mode). I've taken screenshots so you can see (images expire in 7 days):
https://postimg.cc/gallery/9z7FF8X
The following custom CSS was added to get the buttons to align when viewing in desktop mode... could that be playing havoc with the margin? (These statements were taken from another GP support ticket with the same issue)
/* To align buttons in grid */
.af-align-bottom-button .gb-grid-column>.gb-container>.gb-inside-container {
display: flex;
flex-direction: column;
height: 100%;
}
.af-align-bottom-button .gb-grid-column>.gb-container>.gb-inside-container>.gb-button-wrapper {
margin-top: auto;
}
/* end of button align */
Hi there,
Please open a support topic in GB's support forum:
https://wordpress.org/support/plugin/generateblocks/
Thanks!
Hi Leo,
As instructed, I opened a ticket in the GB forum. I should tell you that in testing, I removed the custom CSS (above) and the problem went away. Just saying, since the custom CSS solution was taken from this site on another ticket.
FYI
Thanks!
The GenerateBlocks team responded. The solution was to use a media query on the Custom CSS. Putting it here in case anyone else has this issue:
@media (min-width:769px){
/* To align buttons in grid <em>/
.af-align-bottom-button .gb-grid-column>.gb-container>.gb-inside-container {
display: flex;
flex-direction: column;
height: 100%;
}
.af-align-bottom-button .gb-grid-column>.gb-container>.gb-inside-container>.gb-button-wrapper {
margin-top: auto;
}
}
/</em> end of button align */The ticket can be closed.
Sounds good.
