Widen drop down option menu on product page

Store Design

Topic summary

A user needed help widening a dropdown menu on their product page so the full text would display on desktop (mobile display was already working correctly).

Solution provided:

  • Navigate to Online Store → Theme → Edit code
  • Open Assets → theme.css
  • Add custom CSS code at the bottom targeting screens wider than 768px
  • The code adjusts .product-form__controls-group .product-form__item with flex-basis: 75% to widen the dropdown

Outcome: The solution was implemented successfully and resolved the issue.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
2

Hi @quiztrail
You can try this code

  1. Go to Online Store-> Theme->Edit code
  2. Asset-> theme.css ->paste the below code at the bottom of the file.
@media only screen and (min-width: 768px){
.product-form__controls-group .product-form__item {
    flex-basis: 75%;
}
}
@media only screen and (min-width: 991px){
.product-form__controls-group .product-form__item {
    flex-basis: 75% !important;
}
}
1 Like