Different Border Radius on Mobile

Support
#1

Hello,

All my buttons and input fields shows up on mobile device with border radius. I have my buttons set to square and I was able to add CSS to force radius to 0px but I shouldn’t have to do that, right?

I have attached a screenshot from my mobile and desktop.

Thanks!

Ann

Mobile:

Desktop:

#2

Hi Ann,

Yes, you shouldn’t be adding the css.

I checked and no other css code that could be causing that issue.

Try to clear your browser cache in mobile and check again.

Thanks

#3

Hmm I did and it is still showing the border radius. This is specifically around the contact form 7 input fields. That should still not be the case, right?

The other button was a button added with a short code from a third party plugin so that might be the issue.

Thanks.
Ann

#4

Hi Ann,

Can you remove those CSS fixed that reset border radius to zero? Like Paul said, I also check and there’s no other settings that might result to that issue. We need to check without those CSS fixed to see if this a browser based issue.

#5

Sure!

This is all I had added to completely remove the radius:

#learndash_lessons, #learndash_quizzes, #learndash_profile, #learndash_lesson_topics_list > div {
border-radius: 0px !important;
}

a.learndash-resume-button input[type=“submit”] {
border-radius: 0px;
}

.x-btn, .x-btn:hover, .button, .button:hover, [type=“submit”], [type=“submit”]:hover {
text-shadow: none;
border-radius: 0px !important;
}

#6

This issue is specific to Safari as it add rounded corners to input fields by default. You’ll need that code to force remove the border radius or try replacing it with this:

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
     -webkit-appearance: none;
     border-radius: 0;
}

I’ll forward this to our issue tracker so our development team could be made aware and add border-radius to input elements for cross browser consistency.

Thanks.

#7

That’s annoying haha!

Thanks for figuring it out.

I added the code but it left the password field from woocommerce account page, and email/phone field from contact form 7 still with border-radius.

#8

Hi there,

In that case, you may update the CSS to this

textarea,
input[type="text"],
input[type="button"],
input[type="submit"],
input[type="email"],
input[type="tel"],
input[type="password"],{
     -webkit-appearance: none;
     border-radius: 0;
}

Cheers!

#9

Without the last “,” after password did it :slight_smile:

Thanks Rad!

#10

You’re welcome.