How to Change Button Style for Mobile & Tablet?

[PaulS]

I am building a site using the Metro theme SITE HERE

I really like the simple buttons on the desktop version - nice big blocks

but when you view the page using a tablet or mobile phone the buttons change to rounded corner buttons with gradient - i DO NOT want this

does anyone know a solution?

thanks in advance!

http://funfitfactory.com

[Marcy]

Find this section in your style.css:
button,
input[type="button"],
input[type="submit"],
.btn {
background-color: #08A2AC;
border: medium none;
box-shadow: none;
cursor: pointer;
margin-right: 30px;
margin-top: 10px;
padding: 1rem 1.5rem;
width: auto;
}

Add this line to it. Be sure to keep the "-" in front. This will fix it for iPhone and iPad.
-webkit-appearance: none;

so it looks like

button,
input[type="button"],
input[type="submit"],
.btn {
-webkit-appearance: none;
background-color: #08A2AC;
border: medium none;
box-shadow: none;
cursor: pointer;
margin-right: 30px;
margin-top: 10px;
padding: 1rem 1.5rem;
width: auto;
}

---

Marcy | Amethyst Website Design | Twitter

[PaulS]

Hi Marcy - THANKS!!

you are a life-saver and thx for the speedy response

best PAUL

[Marcy]

You're welcome! I'm glad it helped.

---

Marcy | Amethyst Website Design | Twitter

[ieanea]

Great to see this post. I was having the same trouble. I would hope they would include that in the next updated.

[Author]

Posts