Title: Product Attribute Dropdown Alignment
Last modified: May 14, 2024

---

# Product Attribute Dropdown Alignment

 *  Resolved [getgolfed](https://wordpress.org/support/users/getgolfed/)
 * (@getgolfed)
 * [2 years ago](https://wordpress.org/support/topic/product-attribute-dropdown-alignment/)
 * Hello, I’m just trying to get these drop down boxes aligned so that the page 
   looks cleaner. I can’t seem to find a way to just view the HTML in the WP dashboard.
   Is there a way to edit the visual presentation of the product pages?
 * [https://therouteexchange.com/website_93db652c/product/custom-286-wedge/](https://therouteexchange.com/website_93db652c/product/custom-286-wedge/)
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fproduct-attribute-dropdown-alignment%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 9 replies - 1 through 9 (of 9 total)

 *  [Stef](https://wordpress.org/support/users/serafinnyc/)
 * (@serafinnyc)
 * [2 years ago](https://wordpress.org/support/topic/product-attribute-dropdown-alignment/#post-17755461)
 * 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
 *     ```wp-block-code
       .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
 *     ```wp-block-code
       .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
 *     ```wp-block-code
       @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;
        }
       } 
       ```
   
 *  Thread Starter [getgolfed](https://wordpress.org/support/users/getgolfed/)
 * (@getgolfed)
 * [2 years ago](https://wordpress.org/support/topic/product-attribute-dropdown-alignment/#post-17755536)
 * Perfect. Thank you!!!
 *  [Stef](https://wordpress.org/support/users/serafinnyc/)
 * (@serafinnyc)
 * [2 years ago](https://wordpress.org/support/topic/product-attribute-dropdown-alignment/#post-17755541)
 * [@getgolfed](https://wordpress.org/support/users/getgolfed/) Anytime 🤙🏼
 *  Thread Starter [getgolfed](https://wordpress.org/support/users/getgolfed/)
 * (@getgolfed)
 * [2 years ago](https://wordpress.org/support/topic/product-attribute-dropdown-alignment/#post-17756945)
 * Hey [@serafinnyc](https://wordpress.org/support/users/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 2 years ago by [getgolfed](https://wordpress.org/support/users/getgolfed/).
 *  [Stef](https://wordpress.org/support/users/serafinnyc/)
 * (@serafinnyc)
 * [2 years ago](https://wordpress.org/support/topic/product-attribute-dropdown-alignment/#post-17756990)
 * No, you won’t need an app [@getgolfed](https://wordpress.org/support/users/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](https://wordpress.org/support/users/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](https://loom.com/i/703c732dabcb4ef9abc794a2c011b98e)
 *  Thread Starter [getgolfed](https://wordpress.org/support/users/getgolfed/)
 * (@getgolfed)
 * [2 years ago](https://wordpress.org/support/topic/product-attribute-dropdown-alignment/#post-17757038)
 * 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
 * ![](https://i0.wp.com/imgur.com/6CcoeAS.jpg?ssl=1)
 *  [Stef](https://wordpress.org/support/users/serafinnyc/)
 * (@serafinnyc)
 * [2 years ago](https://wordpress.org/support/topic/product-attribute-dropdown-alignment/#post-17757048)
 * 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
 *  Thread Starter [getgolfed](https://wordpress.org/support/users/getgolfed/)
 * (@getgolfed)
 * [2 years ago](https://wordpress.org/support/topic/product-attribute-dropdown-alignment/#post-17757056)
 * Thank you so much! That did it.
 *  [Stef](https://wordpress.org/support/users/serafinnyc/)
 * (@serafinnyc)
 * [2 years ago](https://wordpress.org/support/topic/product-attribute-dropdown-alignment/#post-17757066)
 * Awesome. Take care

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Product Attribute Dropdown Alignment’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

## Tags

 * [alignment](https://wordpress.org/support/topic-tag/alignment/)
 * [products](https://wordpress.org/support/topic-tag/products/)
 * [variables](https://wordpress.org/support/topic-tag/variables/)

 * 9 replies
 * 2 participants
 * Last reply from: [Stef](https://wordpress.org/support/users/serafinnyc/)
 * Last activity: [2 years ago](https://wordpress.org/support/topic/product-attribute-dropdown-alignment/#post-17757066)
 * Status: resolved