How to get cart page quantity selector and price total aligned?
When my product title is longer the quantity selector and total price will move and are not aligned anymore.
Topic summary
A user is experiencing alignment issues on their cart page where the quantity selector and price total shift out of alignment when product titles are longer.
Proposed Solution:
- A CSS fix was suggested targeting mobile screens (max-width: 767px)
- The code removes top padding from
.cart__template .cart__items__total - Implementation: Add the CSS snippet to the end of theme.css file
Current Status:
- The CSS solution partially worked for longer product titles
- However, it created a new problem: products with shorter titles now display incorrectly
- The issue remains unresolved, with the original poster seeking an alternative solution that works for both long and short product titles
Hello @michelle012
Go to online store ----> themes ----> actions ----> edit code ----> theme.css
add this code at the end of the file and save.
@media only screen and (max-width: 767px) {
.cart__template .cart__items__total {
padding-top: 0px !important;
}
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
thankyou for your response. I tried your selection and it worked with products with a longer title. Only it reversed to the product with a shorter title.
hope you can help me find another solution.