Change width of button to align with button below

[weena]

I think this is a simple one, but i’ve spent too long looking at this and could do with some fresh eyes!

Please see here:

I’m trying to get the ‘Choose size’ button and the ‘Add to basket’ button to be the same width (not the one at the top) - I have got it working on my screen but once I shrink the screen down it misaligns, how is best to achieve this on all screens?

Thank you in advance!

[MatchaCrisp]

use one wrapper to wrap both the “choose size” button and the “add to basket” button in, then use flexbox. Or if you want the “- 1 +” bit in, then you wrap all three of them in, add an empty div before the 3 items, then use flexgrid.

[weena]

Thank you for your response - these buttons are built into the Woocommerce page so I can’t really edit the HTML - is there anything I can do purely with CSS do you think?

[MatchaCrisp]

I looked through the page you linked and saw that the section you were talking about is structured like this:

A <form class="variation_forms cart"> element encapsulates two elements:

1. A <table class="variations"> element on the top displaying the size selection
2. A <div class="single_variation_wrap"> element on the bottom displaying both the number to purchase, and the add to basket button.
   a) Within that .single_variation_wrap you have a <div class="quantity"> and
   b) a <button class="single_add_to_cart_button">

So the easy thing to do, is to set width properties for all of them. The reason for all of them will become clear as I go through this.

1. You make the .variation_forms a fixed 500px wide
2. Then you can set width of .variations to say 60%
3. Set width of .single_variation_wrap to 100%
4. Set width of .quantity to 30%
5. Set width of .single_add_to_cart_button to 60%

These percentage widths only work when they can trace up to a parent element with a set width. With the above you are telling CSS that the form is 500px wide, the table is 60% width, and the div.single_variation_wrap is 100% width as the form. After that since your div is set in width, you can tell the children element in there, the div.quantity to have a width of 30% of div, and the button to have a widht of 60% of div.

But because the div.single_variation_wrap is the same width as its parent, this means both the button and the tablehas the same width property of 60%

[weena]

Thank you so much for taking the time to write that. It’s working perfectly, thank you, really appreciate that!