How can I align the width of my product variant selector and buttons on desktop view?

Store Design
1

Hi, I would like to align the width of my product variant selector and the buttons to the width of the dropdown menus below, as shown in the screenshot below. I should add that they are aligned on the smartphone view, just not on the desktop view of the website - so if it’s possible I would only want to alter the width on the desktop view.

I’m currently using the dawn theme. Here is my website URL: https://www.spicysneakers.pl/

I really appreciate the help. Thanks!

blee.png
blee.png1160×882 129 KB

2

Hi @Dat999

This is David at SalesHunterThemes.

Thank you for your question.
You can try follow this path:

Themes => edit code => asset => base.css

and add this code to bottom of the file base.css

.product .product-form__input,
.product .product-form__buttons{
max-width: 100%;
}
3

hi @Tad123

Its SideNode! We will be happy to help you today.

.product-form__input {
    flex: 0 0 100%;
    padding: 0;
    margin: 0 0 1.2rem;
    max-width: 44rem;
    min-width: fit-content;
    border: none;
   
}

.product-form__buttons {
    max-width: 44rem;
   
}

To solve your problem, you need to modify the max-width property in the Section_mainproduct.css file. Change the existing value of max-width: 44rem; to max-width: 100%;. This will ensure that the main product section expands to the full available width of its container.

If I was able to assist you, please remember to give it a Like and Mark it as the Solution!

Let me know if need further assistance
Regards,
SideNode

4

Worked perfectly! Thank you so much!!