I'm using a column of buttons in the footer and I want them to appear one under each other, but on a mobile view they are side by side on the same line!

[core365]

Hi, I’m working on a website and in the footer I’ve got a column of buttons and I want them to appear one under each other (this views correctly on a desktop), but when you view it on a mobile they are side by side on the same line! Is there a way to do it so they are each on a separate line without having to apply a margin to the right, as I have tried this and it looks odd when you then view it on an iPad!

I’ll put the URL in a secure note as it’s being built on a temporary link.

I’ve attached some screen grans for your reference.

Thanks!

[Prasant]

Hello @core365,

Thanks for reaching out.

Please do the following:

1. Please inspect the button element and under Customize > Setup add a class name. Please change the class name as per requirement.
   
2. After that add following CSS under X > Theme Options > CSS:

.class-name {
display: table;
}

If you don’t want the manually add CSS classes, then please use following CSS instead:

.x-anchor {
    display: table;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[core365]

Hi, that’s great, the CSS sorted it, thanks!

There’s just one other thing if that’s ok! When I view it on the screen size 481px-767px, the button was to the side of the picture of the doctor instead of below, so I used the CSS you gave and applied it to that button too. This has put the button under the image (which is what I wanted) but it’s aligning to the left and I want it to align in the centre. Even though the column has the paragraph set centrally, the button won’t align how I want it to. It’s fine on all other sizes, it’s just on this size that there’s a problem with it. Do you know how to centre align the button?

Here’s a screen grab for your reference.

Thanks!

[ruenel]

Hello @core365,

Thanks for updating in! To make sure that the button will always be at the center, please edit the page and in the button settings, set the left and right margin to zero.

Hope this helps. Please let us know how it goes.

[core365]

Hi, that worked, thank you! That’s really useful to know too, I’ll have to try to remember it for another time!

Thanks!

[mldarshana]

Glad we were able to help