Enlarge checkboxes and radio buttons on mobile

[DoebankDesigns]

How can I enlarge checkboxes and radio buttons on mobile devices? They’re too small to tap. I’m not sure if this is theme related or Woocommerce related. I tried adding this to the CSS with no results:


input[type=checkbox] {
/* All browsers except webkit*/
transform: scale(1.5);

/* Webkit browsers*/
-webkit-transform: scale(1.5);
}


[Rui Guerreiro – SUPPORT]

Hi,

try this one instead.

@media only screen and (max-width: 767px){
  #main-container {
   zoom: 1.5;
  }
}

Hope it helps.

-Rui

[DoebankDesigns]

Nope. That didn’t work. It’s weird, because if I make changes in Chrome’s inspector, I can get the results I want (see the screen shot). But if I make those changes in the CSS file, it doesn’t do anything. Not sure what I’m missing.

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please add !important with each css rule of a class. It should work.
Thanks
Mohammad

[DoebankDesigns]

No, it’s not doing anything.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.tm-extra-product-options .tm-epo-field.tmcp-checkbox, .tm-extra-product-options .tm-epo-field.tmcp-radio {
    width: 25px !important;
    height: 25px !important;
}

Thanks
Mohammad

[DoebankDesigns]

No. I tried that one already. Tried it again just now to be sure, but it doesn’t work. It’s strange because it seems to work in the inspector, but when I add the code to my CSS file, it doesn’t work. Am I putting it in the wrong CSS file?

[Mohammad – SUPPORT]

Hi,
Please go to Admin > Theme Options > Custom CSS and insert the custom css code, save it.
Thanks
Mohammad

[DoebankDesigns]

That’s where I’m putting the code.

[DoebankDesigns]

Wait…no it’s not. Let me try that.

[Mohammad – SUPPORT]

Hi,
Try it and let me know the feedback.
Thanks
Mohammad

[DoebankDesigns]

Ha! That works. I was putting the code in the CSS file under Appearance > Editor with the rest of my custom CSS. It’s almost perfect now. Some of the boxes have their top border cut off. Is there a way to fix that?

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please remove the last code and use this new code:-

.tm-extra-product-options .tm-epo-field.tmcp-checkbox, .tm-extra-product-options .tm-epo-field.tmcp-radio {
    width: 25px !important;
    height: 25px !important; 
    margin-top:5px !important;
}

Thanks
Mohammad

[DoebankDesigns]

Fantastic!!! Thank you so much. That’s exactly what I needed. I really appreciate the help. 🙂

[Mohammad – SUPPORT]

Hi,
Glad to help you.
Thanks
Mohammad