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?
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
}