How can I display all sizes in one line on a mobile screen?

[drew23]

hey,

does anyone know how I can place all sizes in one line on the phone?

thanks in advance

shop: brokenmind.com

pw: test1

[BSS-Commerce]

Hi @drew23

You can try doing it this way:

1. Please go to Online Store → Themes → Edit code:


2. Find the file base.css, add this code at the end of the file, and click Save:

@media screen and (max-width: 435px) {
   .product-form__input input[type=radio]+label{
       font-size: 1.4rem;
       margin: auto;
       padding: 1rem;
   }
}

• Here is the result:

We hope that this can help you.

[drew23]

hey, i tried your code but sadly it didnt work for me.

[BSS-Commerce]

Hi @drew23

You can try this way:

@media screen and (max-width: 545px) {
   .product-form__input input[type=radio]+label{
       font-size: 1.4rem !important;
       margin: auto !important;
       padding: 1rem !important;
       min-width: 80px !important;
   }
}

• Here is the result:

We hope that it will work for you.

[drew23]

it worked thanks! do you know by any chance how to center the sizes?

[BSS-Commerce]

Hi @drew23

You can try adding this code at the end of the base.css file:

@media screen and (max-width: 435px) {
  .product-form__input
    margin: 0 auto !important;
    display: flex !important;
    align-items: center;
  }
}

• Here is the result:

[drew23]

hey, i added your code but it didnt change anything

[BSS-Commerce]

Hi @drew23

We’re so sorry for the confusion, it should be 750px:

@media screen and (max-width: 750px) {
  .product-form__input
    margin: 0 auto !important;
    display: flex !important;
    align-items: center;
  }
}