Add to cart button alignment needed on webshop

Question

On my shop's front page, my products add to cart buttons is not aligned.

See this picture

A fix to this would be to just make the titles shorter or make every title be on 2 lines, but that would bring me more problems on my category pages.

Is there a way to just fix this here on the front page?

Answer 1

Option #1: Set position: relative and optionally a min-height on your li.product and set position: absolute and bottom: 0 on your [Add to cart] buttons in your theme's CSS. Note that your theme may be using different classes/IDs. If the ones I've used don't work, you'll need to inspect with your browser's inspector tools to see which to use for your theme:

li.product {
  position: relative;
  min-height: 400px; // you may or may not need to set the height 
}

li.product a.button {
  position: absolute;
  left: 0; // combined with right: 0, will center the button
  right: 0; // combined with left: 0, will center the button
  bottom: 0;
}

Option #2: Set a min-height on your product's title (e.g., h2)

li.product h2 {
  min-height: 100px; // Adjust to account for your shop's product with the longest title
}