How to adjust Checkout Form to mobile?

  • Resolved jsaded

    (@jsaded)


    6 years, 4 months ago

    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 the media code doesn’t seem to have an effect on smaller versions but the general css code added affects all.

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

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)

  • Apply the code change to desktop only by using this instead:

    @media only screen and (min-width: 1200px) {
    .woocommerce form .form-row input.input-text,
    .woocommerce form .form-row input-text {
    width: 555px !important;
    }
    }

    Then you changes will only apply to PC view and not mobile.

    Use
    @media only screen and (max-width: 768px) {
    your css styles
    }
    to apply css to mobile devices only

    • This reply was modified 6 years, 4 months ago by CarolLeung.
    • This reply was modified 6 years, 4 months ago by CarolLeung.
    • This reply was modified 6 years, 4 months ago by CarolLeung.
    • This reply was modified 6 years, 4 months ago by CarolLeung.

    Please refer to the above code, I made some typos, and corrected them

    I don’t know if you mistyped, but your css are all missing closed brackets at the end }

    • This reply was modified 6 years, 4 months ago by CarolLeung.
    Thread Starter jsaded

    (@jsaded)

    Oh thank you CarolLeung! It worked perfectly ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to adjust Checkout Form to mobile?’ is closed to new replies.