Issue moving 'type="Submit"' button

Hi again,

This is the page in question starting from line #66 I want the ‘buy’ buttons to sit on the bottom of the boxes but no matter what I can’t get them to budge. Adding flex just moves the text within the button not the button itself.

My ‘assistant’ red border lines around the entire page tell me there is no box from which they can move, is this true? I assumed the below would have been fine as a container where the buttons reside.

.shopbox {
  display: flex;
  flex-direction: column;
  flex: 0 1 20%;
  margin: 5px;
  border: 2px solid #117A65;;


Maybe try wrapping the input[submit] tags in a separate div? @oocopperpot

1 Like

Did you remove the HTML you had? You are asking about the 3 product cards, right?

I’m guessing you would have something like this maybe?

<div class="shopbox">
  <h3>Some product</h3>
  <p>body text, Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore eveniet, inventore doloribus vero facilis explicabo modi! Ipsa architecto debitis dolorum.</p>
  <a href="#">Buy</a>

If so, one option might be to set flex-direction to column and then use justify-content: space-between. This would push the title and button to the top/bottom and the product description would be in the center. This may or may not look like you want.

1 Like

I shall give this a try, thank you.

Hey, yes I ended up removing some of the old stuff to keep it more simple for when I try again. Your way sounds like it could work! Will give it a go too.