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!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024