Shopify themes, liquid, logos, and UX
I'm using Debut theme with added code so customers can upload image with ordering a custom product. When the product is added to the cart, the "Your Cart" page is off-center and does not show the complete price and additional detail on the mobile view. When ordered from a computer, the view is fine.
How do I fix it so it is centered?
I've attached a sample screen shot.
Thanks so much in advance!
Solved! Go to the solution
This is an accepted solution.
Please follow the steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > style.css and paste this at the bottom of the file:
@media only screen and (max-width: 749px){
[data-cart-item-property-value] a{
width: 135px;
overflow: hidden;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
}
}
This is an accepted solution.
@media only screen and (max-width: 749px){
[data-cart-item-property-value] a{
width: 135px;
overflow: hidden;
display: block;
}
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid
note : if you are having already this media then add only css in it
Hello,
you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!
Please Share your store live url where you want to do modification, so that I will solve your issue here!
hello, Thank you for your help on this. I can't see the code you've - it's cut off on the left side. Also, my issue only happens when there is an image attached to the order. It's fine if the order does not include an image. Does your code address that?
thanks so much, teresa
This is an accepted solution.
Please follow the steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > style.css and paste this at the bottom of the file:
@media only screen and (max-width: 749px){
[data-cart-item-property-value] a{
width: 135px;
overflow: hidden;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
}
}
This is an accepted solution.
@media only screen and (max-width: 749px){
[data-cart-item-property-value] a{
width: 135px;
overflow: hidden;
display: block;
}
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid
note : if you are having already this media then add only css in it
Thank you! It worked beautifully!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024