0

I have an email contact form, with a submit button, and some basic styling on the button. All of the styles work on Desktop, and most of the styles are applied on mobile, just not the padding or border-radius. I already tried switching to EM units instead of pixels. The url is http://sharperprogrammer.com/contact (not self-promoting, just thought it would help to see the full thing)

HTML:

<input type="submit">

CSS:

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    /* padding: 12px 20px; */
    padding: 1.2em 2em;
    border: none;
    border-radius: 0.4em;
    cursor: pointer;
    margin: 10px;
}

I have even connected my iPhone to my Mac and opened the Safari Developer Tools, and I can check and uncheck to toggle different styles on the button, but the padding seems to do nothing. It's weird to me because the other styles like the background-color work fine, so I know everything is connected at least. Thanks for taking a look!

Edit: The style is just fine on an Android phone's Chrome browser, but the styling isn't applied correctly on my iPhone's Chrome or Safari browser. And I've cleared my browser cache just in case.

Here is a screenshot:

button_padding_not_applied

S. Harper
  • 127
  • 8

2 Answers2

1

Try to add this:

  • in the navbar.css file inside media query :
@media only screen and (max-width: 600px) {
.navbar{
    flex-direction: column;
    align-items: center;
}

}
Ayman Morsy
  • 873
  • 5
  • 18
1

It looks to me like Safari / Chrome Mobile have some default button styles that are more specific than input [type=submit]. Perhaps the more specific styles don't specify background-color which is why yours is working.

I found two solutions, which I will link below, that both vouch for adding -webkit-appearance: none; as a solution.

CSS submit button weird rendering on iPad/iPhone

Why is my button style changing when on laptop and mobile

Hopefully this will work for you :)

Payton Jewell
  • 70
  • 7