Centre Buttons On Mobile View Only #Pro

Support
#1

Hi,

I’m just wondering how to centre buttons on mobile below screen width 760px.

I’m using this code, but it doesn’t seem to be working:

@media (max-width: 760px) {
#x-content-band .x-btn .x-btn-pill .x-btn-large {
display: block;
float: none !important;
margin: 0 auto !important;
}
}

Site is http://staging.befair-dev.flywheelsites.com (will send password in separate response)

Thanks

Dan

#2

Hi @DannyC,

Adjust your code with this:

@media (max-width: 760px) {
.buttonclass .x-btn .x-btn-pill .x-btn-large 
{
     display: block;
     margin: 0 auto;
     width:100px;
}
}

Adjust the width according to what you desire how your button looks.

Let us know how it goes.

Thanks

#3

Hi,

Thanks for the response.

Unfortunately, this doesn’t seem to work. I’ve adjusted the width several times but no change on the button positioning.

I’ve also validated my CSS and it shows no errors anywhere else.

Any thoughts?

Dan

#4

Hi Dan,

I can you have added the custom CSS but buttonclass class is not added anywhere on your homepage. I did double check it on your homepage source code.

Let’s try to update above CSS to this:

@media (max-width: 760px) {
   .center-btn{
      display: block;
      margin: 0 auto;
      width:100px;
   }
 }

For that CSS to work, make sure that you will add center-btn on the class field of the button element that you want to be centered.

Let us know how this goes.

#5

Hi,

Awesome :slight_smile:

That worked perfectly. I just needed to tweak the width to be responsive for different text int he button, but other than that it worked great.

Thanks for your help here.

Dan

P.S

Loving the new forums, really intuitive and easy to use.

#6

You’re welcome.