Iphone CSS Problem

  • 5 August 2021
  • 2 replies
  • 15 views

Hello,

I’m new with Unbounce and have a problem.

I have a form on my page. My submit button’s styling good on Desktop and Android device… But when I try with iPhone the styling of the button is completely different.

Any suggestions to me?


2 replies

I’ve had a few problems with safari not rendering my css the same way as other browsers…

Post your CSS so we can take a look!

Thank you. I want to show my form’s button same as Desktop. Working on all mobile and desktop instead of iPhone, here is the CSS

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.hs-form label {
font-family: “Museo Sans”, arial, san-serif !important;
color: #FFFFFF !important;
}
.hs-form-field {
font-family: “Museo Sans”, arial, san-serif !important;
font-size: 16px !important;
padding-bottom: 3px !important;
}
.hs-input {
padding:5px !important;
width: 94% !important;
}
.input .button .textarea {
width: 100% !important;
}
.input {
padding-top: 2px !important;
padding-bottom: 15px !important;
}
.hs-button.primary.large {
width: 100% !important;
margin-bottom: 20px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
-webkit-border-radius: 4px !important;
border-radius: 4px !important;
font-weight: 500 !important;
color: #fff !important;
text-shadow: 0 0px rgba(0,0,0,.4) !important;
background-color: #e3682a !important;
border: 0 !important;
font-family: “Museo Sans”, arial, san-serif !important;
font-size: 14px !important;
}
.hs-button.primary.large:hover {
background-color: #e3682a !important;
}
#container_optout,
#container_optin,
#container_state {
display: none;
}
#container_optout.show,
#container_optin.show,
#container_state.show {
display: block;
}
#container_optin.show {
top: 252px !important;
}
#lp-code-943 .label {
font-family: “Museo Sans”, arial, san-serif !important;
font-weight: 300;
width: 100% !important;
margin-bottom: 20px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
-webkit-border-radius: 4px !important;
border-radius: 4px !important;
font-weight: 500 !important;
color: #fff !important;
text-shadow: 0 0px rgba(0,0,0,.4) !important;
background-color: #e3682a !important;
border: 0 !important;
font-family: “Museo Sans”, arial, san-serif !important;
font-size: 14px !important;
}

Reply