Cart page does not display correctly when customer uploads image

Store Design
1

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!

the center section does not fit the mobile view
the center section does not fit the mobile view1170×2532 201 KB

2

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!

3

Thank you!

entitledgolf.com

4

oscprofessional_0-1628170244078.png
oscprofessional_0-1628170244078.png869×756 36.1 KB

5

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

6

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;
    }
    }
7 
@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

8

Thank you! It worked beautifully!