How can I align the “Add to cart” buttons on mobile. This is for a Featured Section on mobile. Please see image below. When going to the website on mobile scroll down the page and you will see the misaligned “Add to cart” buttons. Thank you in advance for your help.
Topic summary
A user encountered misaligned “Add to cart” buttons in the Featured Collection section when viewing their Empire theme store on mobile devices.
Solution Provided:
- Navigate to Themes → Edit Code → Assets → theme.css
- Add CSS code targeting
.product_item__containerwithflex: 1;inside a media query for screens with max-width 1203px - This CSS adjustment ensures buttons align properly across product cards on mobile
Outcome:
The solution was successfully implemented and resolved the alignment issue. The user confirmed the fix worked as intended.
Hi @thekenstar
This is David at SalesHunterThemes.
To fix the problem
Follow this path:
Themes => edit code => asset => theme.css
and add this code to bottom of the file theme.css
@media screen and (max-width: 1023px){
.productitem__container {
flex: 1;
}
}
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
David | SalesHunterThemes team
@David_SHT Amazing! Thank you so much, that worked.