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;
 }
} 

@getgolfed Anytime 🤙🏼

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

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

Awesome. Take care