How to adjust Checkout Form to mobile?

Hello,
I am working on a website using Woocommerce, but I am having some problems adjusting the checkout form in mobile version. I want to decrease the size of boxes in form but nothing happen.

After adding some css code, the checkout box form looks ok only on desktop, I added this code:

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row input-text {
width:555px!important;

But in mobile version the box keep this size, I want to decrease the size but nothing happen using @media (max-width: 508px) {

I apparently have this problem with other issues, the css code I added for smaller versions using @media doesn’t seem to have an effect on smaller versions but the css code added without using @media affects all.

I would appreciate a help, i don’t know what to do.

Thanks

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