Hi,
After a lot of searching I haven’t found a solution to my problem. The price and product title allignment is off on mobile while desktop is fine (the way I want it).
Desktop:
Mobile:
As you can see the price and product title are clashing.
The ideal solution in my situation would be to keep desktop as it is now and have mobile show the price under the product title instead of to the right of it and cutting of the product title.
Is this possible in any way?
Thanks so much for the support!
Would you mind to share your Store URL website? with password if its unpublish. Thanks!
Could you share your store URL so I can check?
Thanks for the info, try this one.
@media only screen and (max-width: 749px){
.collection .card__information {
display: flex;
flex-direction: column;
}
.card__content .card__heading, .card__content .price {
text-align: center !important;
}
.card__content .price {
margin-top: 0 !important;
}
}
And Save.
Result:
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Thank you for the reply. I followed your steps and put the code you provided in my assets - base.css code on the bottom.
Unfortunately this didn’t work. After saving I refreshed the mobile preview and it remains the same. How did you get yours to work correctly? Below a screenshot on how I placed the code at the bottom of the assets/base.css
Thank you for your help again
On this side your lacking 1 closing bracket.
Add 1 closing bracket like this:
Make sure to save and refresh.
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
@Made4uo-Ribe Thanks for the reply again.
I followed your instructions and added the closing bracket, saved and refreshed:
However, the result is still not how you showed it:
Ideally, on mobile, I would like to have the product title first on top alligned to the left. One row below there alligned to the left also should be the price. Something like this example:
I’m not sure what I am missing now that’s casuing the price to not be properly alligned on mobile. I really appreciate your help!
Thanks!!!
No worries, please replace with this code below.
@media only screen and (max-width: 749px){
.collection .card__information {
display: flex;
flex-direction: column;
}
.card-wrapper .card__heading, .card-wrapper .card__information .price {
text-align: left !important;
margin-top: 0 !important;
}
}
And Save.
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Thanks for your reply. The price is now correctly placed and alligned on mobile and desktop! That’s great!
However, the product title text seems to still allign on the right side instead of the left:
Any idea why this is happening or how to prevent it? This issue is again mobile only.
Thanks!
@Dan-From-Ryviu This worked perfect! Thanks so much!!
