Change width of button to align with button below

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!

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.

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?

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%

1 Like

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