Custom Button styles no longer applying on mobile

Support
#1

Hi, I’ve created a custom button for our services page and it was working great. It was also displaying correctly on mobile. Now, for some reason, the buttons change back to normal buttons when the screen gets small. I have duplicate sections, displaying/hiding on the appropriate screen sizes, and the class of .btn-services has been applied to all buttons.

My custom outline button styles are not working now either.

http://dev.nutrition-connection.com/services/

Side note, I’m trying to vertical align the text in the center, I’ve tried a number of things, and I can not get it to work. Any suggestions?

Here’s my code:

.btn-services{
background-color: #ffffff;
background-color: rgba(255, 255, 255, 0.80);
border: solid #555555 .5px;
color: #e25d3d;
text-shadow: none;
font-size: 24px;
border-radius: 0px;
width: 300px;
height: 250px;
padding-top: 90px;
margin-top: 40px;
}

.btn-services:hover {
text-shadow: none;
background-color: #e25d3d;
color: #ffffff;
}

.btn-outline {
border: solid #ffffff .25px;
color: #ffffff;
text-align: center;
text-shadow: none;
vertical-align: middle;

}

.btn-outline:hover {
text-shadow: none;
color: #ffffff;
border: solid rgba(255, 255, 255, 0.50);

}

#2

Hello There,

Thank you for the very detailed post information. I have inspected your page and it seems your custom css is messed up. Please make sure that all your code block were properly closed. Please see the image below for example:

Please let us know how it goes.

#3

This fix worked great, thank you! Sloppy code, sorry.

Do you have any suggestions for vertically aligning the type center? http://dev.nutrition-connection.com/services/ Same buttons. I’ve tried a number of things, but nothing has worked.

#4

You’re always welcome!

From this CSS:

.btn-services {
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.80);
    border: solid #555555 .5px;
    color: #e25d3d;
    text-shadow: none;
    font-size: 24px;
    border-radius: 0px;
    width: 300px;
    height: 250px;
    padding-top: 90px;
    margin-top: 40px;
}

Remove padding-top: 90px;. Then on each button style field, add top padding accordingly. It will be different per button depending on the length of the text.

Hope this helps.

#5

That works great. I was hoping to avoid using inline styles, but I think this might be best given my trial and error.
Thanks so much!

#6

You’re most welcome! Yes, sometimes it’s unavoidable and which usually used by most javascripts too.