Center a button on mobile

[logoglo]

HI there, see:

https://www.logoglo.com/new-home/

The button i have that says “see our prices” how do I get that to center on a mobile device?

Thanks.

[Prasant]

Hello @logoglo,

Thanks for asking.

Please add a class to the button element under Customize > Setup > Class. After that add following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
  .class-name {
    float: none;
}
}

Please change the class name class-name as per your choice. To learn more about CSS media queries please take a look at following resource.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Thanks.

[logoglo]

Hmm, it worked for a second, then didnt…

[nabeel]

Hi again,

I see you’ve added a class button-align you can now remove the previously given code and add the following code in the Theme Options > CSS:

a.x-btn.button-align {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

That should centralize your button. You can checkout this guide here https://css-tricks.com/centering-css-complete-guide/ to center any type of element. If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Cheers!

[logoglo]

Thanks. That worked.

[friech]

We are delighted to assist you with this.

Cheers!