Checkbox style on iPhone and Android

[Siemon-Schilder]

Hi,

I'm using the Shopify UI generator to create multiple checkbox for my product. It looks ok for desktop, but the style totally messed up on the mobile devices. I just want the checkboxes to align so they look clean and nice. However on the mobile devices it looks like this:

https://earlorange.com/products/surprise-box?variant=34358433710124

Can anyone give me some advice how to adjust the style so the checkbox on iphone won't be this big and the style will be more aligned like in the desktop? Thanks in advance. 

This is the html I used: 

 <div class="product-form__item--checkbox-area">
        <div class="line-item-property__field product-form__item product-form__input product-form__item--checkbox">
             <label>Selecteer de theesoorten waar je van houdt (meerdere opties mogelijk):</label><br>
        </div>
             <div class="line-item-property__field product-form__item product-form__input product-form__item--checkbox">
               <input required class="required" type="checkbox" id="Groene-thee" hidden-data="Selecteer-de theesoorten waar je van houdt (meerdere opties mogelijk):" onchange="fillHidden('Selecteer-de theesoorten waar je van houdt (meerdere opties mogelijk):')" value="Groene thee"><label for="Groene-thee">Groene thee</label><br>
               <input required class="required" type="checkbox" id="Witte-thee" hidden-data="Selecteer-de theesoorten waar je van houdt (meerdere opties mogelijk):" onchange="fillHidden('Selecteer-de theesoorten waar je van houdt (meerdere opties mogelijk):')" value="Witte thee"><label for="Witte-thee">Witte thee</label><br>
               <input required class="required" type="checkbox" id="Zwarte-thee" hidden-data="Selecteer-de theesoorten waar je van houdt (meerdere opties mogelijk):" onchange="fillHidden('Selecteer-de theesoorten waar je van houdt (meerdere opties mogelijk):')" value="Zwarte thee"><label for="Zwarte-thee">Zwarte thee</label><br>
               <input required class="required" type="checkbox" id="Fruit-melanges" hidden-data="Selecteer-de theesoorten waar je van houdt (meerdere opties mogelijk):" onchange="fillHidden('Selecteer-de theesoorten waar je van houdt (meerdere opties mogelijk):')" value="Fruit melanges"><label for="Fruit-melanges">Fruit melanges</label><br>
             </div> 
             <div class="line-item-property__field product-form__item product-form__input product-form__item--checkbox">
               <input required class="required" type="checkbox" id="Rooibos-thee" hidden-data="Selecteer-de theesoorten waar je van houdt (meerdere opties mogelijk):" onchange="fillHidden('Selecteer-de theesoorten waar je van houdt (meerdere opties mogelijk):')" value="Rooibos thee"><label for="Rooibos-thee">Rooibos thee</label><br>
               <input required class="required" type="checkbox" id="Kruiden-en specerijen melanges" hidden-data="Selecteer-de theesoorten waar je van houdt (meerdere opties mogelijk):" onchange="fillHidden('Selecteer-de theesoorten waar je van houdt (meerdere opties mogelijk):')" value="Kruiden en specerijen melanges"><label for="Kruiden-en specerijen melanges">Kruiden en specerijen melanges</label><br>
               <input required class="required" type="checkbox" id="Geen-voorkeur" hidden-data="Selecteer-de theesoorten waar je van houdt (meerdere opties mogelijk):" onchange="fillHidden('Selecteer-de theesoorten waar je van houdt (meerdere opties mogelijk):')" value="Geen voorkeur"><label for="Geen-voorkeur">Geen voorkeur</label><br>
               <input type="hidden" id="Selecteer-de theesoorten waar je van houdt (meerdere opties mogelijk):" name="properties[Selecteer de theesoorten waar je van houdt (meerdere opties mogelijk):]">
             </div>
     </div>  
               <script>
                    function fillHidden(hiddenname) {
                    var checkboxes = document.querySelectorAll('[hidden-data="'+hiddenname+'"]');
                    var hiddenfield = document.getElementById(hiddenname);
                    hiddenfield.value = ""
                    var i;
                    for (i = 0; i < checkboxes.length; i++) {
                    var x = checkboxes[i];
                    if(x.checked){
                      if(hiddenfield.value==""){
                         hiddenfield.value = x.value;
                         }else{
                         hiddenfield.value = hiddenfield.value + ", " + x.value; 
                         } 
                        }
                       }
                      }
              </script>
        

and this is the css:

.product-form__item--checkbox
        {          
        -webkit-appearance: none;
        border-radius: 0;
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        justify-content:space-between;
        }
.product-form__item--checkbox-area
        {
        background-color:#F1EDE2; 
        }

[KetanKumar]

Hello, @Siemon-Schilder 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

also, 

can you please add this code 

https://codepen.io/valerypatorius/pen/oXGMGL

if you need more help let me know i can help you,.

[Siemon-Schilder]

Hi @KetanKumar ,

Thank you so much for the answer, this is really helpful for me. This is my site URL: https://earlorange.com/ (please scroll down to see the product).

As you can see, I tried to implement it base on the styling you provided. However, I still can't get the alignment work ideally. I want to make the selection list into 2 columns, first column with 4 objects and the second colum with the rest 3. What CSS property should I add to make this look nice and clean?

Best regards,

Siemon

[KetanKumar · Accepted solution]

@Siemon-Schilder 

Thanks for update 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.product-form__item--checkbox {
.product-form__input {
    padding: 5px 0px;
    flex-basis: 100%;
}
}

[Siemon-Schilder]

Thank you @KetanKumar! 

[zadapple]

Thank you so much for sharing this information. The information provided is really helpful.

IPhone 12 and iPhone 12 accessories . You can make your phone smart and mor stylist. The best-designed iPhone-related cases are available here.

IPhone12 accessories