“Multiple Choice Option” buttons are not sized properly on mobile

This is regarding the Jetpack Contact Form.

Someone sent me a screenshot of this page on their iPhone and all the checkbox buttons were different sizes.

I can kind of reproduce the effect in Firefox on desktop, not when I downsize the screen, but when I’m in Inspect with the code to the right, and make the code so wide that the remaining column (the web page) is very narrow. There I see that as the page gets smaller, the buttons change size to compensate, but they don’t do so at the same rate/gracefully. Such that some of the buttons are larger than others.

“Sync field styles” is toggled on.

It seems to help if I reduce the amount of text in each option, so I suppose that reducing the width of the space it’s making the boxes smaller to fit, but since the text is a different width it’s inconsistent..?

Regardless I’m lost as to how to fix it. I hope you can help! It looks dreadful and I don’t have an iPhone so even if I had a clue it’s difficult for me to test solutions.

EDIT: Using Inspect, I figured that the code affecting the buttons. I surmised that it was the use of Rems causing the issue. I get that Rems are better for responsive, but they change size dynamically while pixels don’t. So I added this:

.contact-form :where(input[type="radio"], input[type="checkbox"])
{height: 28px !important;
width: 28px !important;
}

This did effectively change the size of the buttons (so it is the right class at least). But when I minimize the page width with the inspector, the buttons are still coming up different sizes.

• This topic was modified 1 year, 4 months ago by futureisfiction.

The page I need help with: [log in to see the link]