Skip to main content

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?

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