Crelly Slider - Button Size on Mobile

I’m developing a main page slider replacement on my development site (Staging Site Link) using the Crelly Slider Plugin and have a question about the size of the Click Box I’ve included on the bottom of the slider image.

I’m using the following CSS Code to render it:

background-color:#005581;
color:#fff;
border-radius: 3px;
padding: 7px 22px;
font-family: ‘Ubuntu’, sans-serif;
text-transform: uppercase;
font-size: 13px;
font-weight:500;

Is there any code that I can add to make the button appear larger on Mobile?

Thank you.

Andy

Hello Andy,

Please try adding this extra custom CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 991px) {
      
      .cs-slide a > div {
        font-size: 18px !important;
        padding: 15px 20px !important;
      }
      
    }

Regards,
Kharis

Kharis,
the code worked to make the box render how I want it to. One problem though - on Mobile, the See Our Services Box does not center on the screen. Any way to make this happen?

Thanks.

Andy

Hello Andy,

Please try this code:

    @media only screen and (max-width: 991px) {
      
      .cs-slide a > div {
        font-size: 18px !important;
        padding: 15px 20px !important;
        left: 50% !important;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);    
      }
      
    }

Regards,
Kharis

Kharis,
I deployed the code you provided above on my development/test site (LINK). It is still not exactly centered when I look at the site on my iPhone.

Are there any code modifications that I can do to make this center properly?

See attached image: https://snag.gy/1graAV.jpg

Thank you.

Andy

Hello There,

I am having the same issue.
I can see you managed to center the button. Can you explain how you did ?

Moreover, how did you keep the hover effect ?
I have set a background color, which stays same when passing the cursor over the button.

Here is the CSS code I have put inside crelly slider editor :

background-color:#3aafe0;
color:#fff;
border-radius: 12px;
padding: 17px 32px;
text-transform: uppercase;
font-size: 15px;
font-weight:700;
font-family:montserrat;