Site logo

Archived topic

Button(s) allignment in tablet/mobile

5 replies · Started by David on August 10, 2021

Viewing posts 1–6 of 6

I have a new site I'm working on.
I started 4 buttons with one of the pre-made buttons in GBP
I have adjusted the margins, and it looks fine in development, but on tablet and mobile the 4 buttons (stacked) are more right aligned.
It's on SiteGround and cache has been cleared, but It persists and I can't work out why!
TIA, Dave

Hi there,

As it is now, it seems to be inheriting the 50px margin set on desktop and it's causing the buttons to be pushed to the right.

Can you try setting a different margin for tablet and mobile? You can set it on the tablet and mobile tab for the specific blocks. :D

Thanks Elvin,

Yes that was it.
I added left and right margin for tablet (which went to mobile) so the buttons were not full width.
How would I make the buttons not be full width on tablet ?
Would I need custom CSS to make them a fixed width and centered on tablet ?
TIA, Dave

Would I need custom CSS to make them a fixed width and centered on tablet ?

Yes that's pretty much what we have to do.

Set a unique class for the button's wrapper and do CSS like this example.

Example:

@media(max-width:1024px){
.your-custom-css-class .gb-button {
    width: auto !important;
}
}

Marking as resolved!
Thanks, Dave

Nice one. Glad you got it sorted. :D

This archived topic is closed to new replies.