Archived topic
Mystery padding/margin on mobile
5 replies · Started by dave on January 26, 2022
Hello,
I have a form on my site and I am using some code I found to style the inputs to look like buttons. It's working perfectly until it gets below 640px wide. Then the "buttons" are adopting some right padding or margin from somewhere...
I've been hunting and poking around in the inspector for an embarrassingly long time and I can't figure out whats causing it or how to target and correct it. Is this something you guys are able to help with?
Thank you
Hi Dave,
You have this CSS somewhere on your site, as your cache plugin is on, I can't see where it's coming from:
@media only screen and (max-width: 641px){
.gform_wrapper ul.gfield_checkbox li label, .gform_wrapper ul.gfield_radio li label {
width: 85%;
cursor: pointer;
}
}The issue is from the width: 85%;.
Thank you again Ying.
Sorry I forgot to turn of my caching plugin. I couldn't see this code anywhere that I would have added it myself, so I assumed it must be coming from the form plugin itself. I added your code in the customizer and changed the width to 100% and Shazam! it works!
Thank you for all your help on this site Ying, I think I have one more question which I will send of shortly and then I think I will have it all under control and hopefully finished by the weekend :)
I think if you change the width: 85%; to max-width: 100%; width: auto;, it might work better :)
Just updated to your suggestion, works great! Thank you for solving this one for me :)
No problem :)
