Cart page does not display correctly when customer uploads image

Solved
entitledgolf
Excursionist
20 0 5

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 viewthe center section does not fit the mobile view

0 Likes

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!

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
entitledgolf
Excursionist
20 0 5
Thank you!

entitledgolf.com
0 Likes

oscprofessional_0-1628170244078.png

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
entitledgolf
Excursionist
20 0 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

0 Likes

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

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes

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

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
entitledgolf
Excursionist
20 0 5

Thank you! It worked beautifully!

0 Likes