Solved

Cart page does not display correctly when customer uploads image

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

Accepted Solutions (2)

LitExtension
Shopify Partner
4860 1001 1132

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 - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

oscprofessional
Shopify Partner
15830 2369 3072

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

Replies 7 (7)

oscprofessional
Shopify Partner
15830 2369 3072

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!

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
entitledgolf
Excursionist
20 0 5
Thank you!

entitledgolf.com
oscprofessional
Shopify Partner
15830 2369 3072

oscprofessional_0-1628170244078.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
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

LitExtension
Shopify Partner
4860 1001 1132

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 - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
oscprofessional
Shopify Partner
15830 2369 3072

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
entitledgolf
Excursionist
20 0 5

Thank you! It worked beautifully!