Button size, shape and color on mobile

rtsallagov · October 2016

Hello,

Here is my homepage: https://spain-residence.com

I have CF7 contact form on the top of this page. I have modified Submit button, you can see it on the first screenshot - https://snag.gy/FSn3yh.jpg

But this button looks different on mobile. I have checked it on iphone and ipad. You can see it on the second screenshot - https://snag.gy/HxOcTq.jpg
Strange that I can't reproduce it on desktop when simulating iphone or ipad resolution.

What css should I edit? Please help.

Albert · October 2016

Hi,

Safari browser overwrite theme styles and that's why the button looks different. To sort it out, please use the following css:

input.wpcf7-form-control.wpcf7-submit.button.button_full_width.button_size_3.button_theme{
    border-radius:3px !important;
    box-shadow:0 0 0 0 transparent !important;
}

rtsallagov · October 2016

Doesn't work. I use this css:

input.wpcf7-form-control.wpcf7-submit.button.button_full_width.button_size_3.button_theme {

white-space: normal !important;

background-color: #ffdd2e !important;

color: black !important;

border-radius:3px !important;

border: solid #fff650 !important;

border-width: 1px 1px 0 1px !important;

box-shadow:0 0 0 0 transparent !important;

}

The button still looks the same on Iphone

Albert · October 2016

Please send us dashboard access privately thru contact form which is on the right side at http://themeforest.net/user/muffingroup#contact and we will check what might be the reason then. Please don’t forget to let us know what for the access is.

rtsallagov · October 2016

I have sent the access

rtsallagov · November 2016

fixed it!

Have added:

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

Albert · November 2016

Ok, great! Thanks for explanation and you are definitely right. We forgot about the appearance attributes.

Button size, shape and color on mobile

Comments