Product Attribute Dropdown Alignment | WordPress.org

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 🤙🏼

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer