Margin not working in mobile

Container for 2-block grid looks fine on desktop but does not work in mobile.

There is custom CSS on the grid to allow the buttons to align in desktop mode. The CSS was taken off of a ticket (not mine) on GeneratePress. The Custom CSS is as follows:

/* 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 */

Increasing the margin in the block editor for mobile shows the margin increasing just fine, but when testing it on an actual mobile device it does not work. Screen shots for both are provided in the following screen shots:

The problem seems to be caused by the Custom CSS. When I remove it, the margins work as they should. I posted this problem on the GeneratePress site, but Leo told me to post the problem here in the GenerateBlocks forum. That ticket URL is:

Thank you.

Hi @JonEricson

If the custom CSS works for you on desktop and you only wish for it to work on desktop then we can isolate this w/ a @media rule.

We can wrap the CSS like this:

@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 */
}

This way, the mobile margins will function as it should like the default w/o the custom CSS.

This worked great… the first time I’ve used a media query in Custom CSS.

Thank you for your help!
This ticket can be closed :grinning:

No problem. Glad you got it sorted. :smiley: