Product Attribute Dropdown Alignment

You can do a few things. But mostly it’s going to come down to a bunch of CSS.

You could do an inline format

.single-product .variations tr{
    padding-bottom:3rem !important;
    display:inline-block !important;
}
.single-product .variations th{
    width:100%;
    
    
}
.single-product .variations .value{
    float:left;
    width:100%;
    display:flex !important;
}

or a not

.single-product .variations tr{
    padding-bottom:6rem !important; /*If you want to add space between them*/
}
.single-product .variations th{
    width:100%;
    
    
}
.single-product .variations .value{
    float:left;
    width:100%;
    display:flex !important;
}

Then for mobile you’ll need to do

@media screen and (max-width:48em){
.single-product .variations tr{
    padding-bottom:1rem !important; /*If you want to add space between them*/
    
}
.single-product .variations select{ /* Select Bar*/
    width:100% !important;
}    
.single-product .variations th{
    max-width:100%;
    
    
}
.single-product .variations .value{
    width:100% ;
    display:flex !important;
 }
} 

Perfect. Thank you!!!

@getgolfed Anytime ????

Hey @serafinnyc…that worked perfectly but do I need a plugin or something to edit mobile CSS specifically? I tried Editor>Styles>CSS but what I’m doing seems to edit it for desktop, tablet and mobile.

Also, if you get a chance, is there a way to bulk change the variation image depending on one variable? In this case it’s just the color of the product. Otherwise I can do them all manually but it’s going to take a long time to do that. Thanks again!

• This reply was modified 6 months, 1 week ago by getgolfed.

No, you won’t need an app @getgolfed for mobile only CSS. Just make sure you’re not adding everything above. The first snippet is for Desktop only and displays them in an inline manner. The second snippet is for Desktop only and shows them stacked. So decided which on you want.

Then add the last snippet that starts with @media below it. Be sure to clear your cache after adding any new CSS to a site.

All of this goes in your Additional CSS tab of the Customizer section of your site. Go to Appearance > Customize > Look to the last or second to last tab Additional CSS and add it there. Hope that helps

Screenshot

Thanks! I think I got it except the Clear button to reset the selections is on two lines when I’m viewing it in iPhone Pro Max 14 mode

Good, so make sure to clear cache now because that looks like there’s too much gap for a padding of 1rem bottom. I didn’t have that much space when I did it. If it’s like that after clearing cache then simply remove the padding-bottom rule

Thank you so much! That did it.

Awesome. Take care