Mobile Cart View

Site URL: https://goldfish-koi-xjg4.squarespace.com/config/design

Hello,

Is there a way I can optimise MOBILE view of the items when they are in the cart?

Right ow pictures are too small and text (description is too big).

Best and thanks!

Hi. I see you haven't solved this. Do you still need help with this?

If yes, describe the desired layout, we can check carefully.

@tuanphan if you could help to fix this - it would be great. I would like the image will be bigger that the text, just visually. thanks! 

Hi

Use this code in Design -> Custom CSS

@media screen and (max-width: 640px){

.CartTableRow-itemImage-1bz_- {
    width: 16vw !important;
    min-width: 16vw !important;
    margin-left:-15px !important;
}

Please use the like button if it helps you!

Best,
Leopold

it says - missing closing `}`

when i integrate it

@media screen and (max-width: 640px){
.CartTableRow-itemImage-1bz_- {
    width: 16vw !important;
    min-width: 16vw !important;
    margin-left:-15px !important;
}
}

Fixed. Check this code please.

it is making the mobile cart view better, but not working together with the desktop view now, check out the whole code I have there

.sqs-search-page-notice {
    visibility: hidden;
}
.sqs-search-page-notice:before {
    visibility: visible;
    content: "No products found. Please try again!";
}
.CartTableRow-itemPrice-26eXS {
  font-size: 16px; //Price font-size
}
.CartTable-subtotalPrice-2JFeD {
  font-size: 20px; //Subtotal font-size
}
.CartTableRow-itemDesc-1MjIC a {
  font-size: 16px; //Product title font-size
}

@media screen and (max-width: 640px){
.CartTableRow-itemImage-1bz_- {
    width: 16vw !important;
    min-width: 16vw !important;
    margin-left:-15px !important;
}
}

just need to make sure that desktop and mobile versions look clean and tidy 

Hi @MATTER
If you want to completely fix that styles and make it better please send DM to me for custom code working!
Because you need layout not just a few lines of CSS.

Please use the like button if it helps you!

Best,
Leopold

On 6/30/2020 at 3:03 PM, MATTER said:

Is there a way I can optimise MOBILE view of the items when they are in the cart? Right now pictures are too small and text (description is too big).

When considering the "optimised" cart view, bear in mind that visitors to your site may have different mobile devices, with different screen sizes. Squarespace have already optimised the mobile cart view for the best user experience on a range of devices, but if you make changes to the CSS you may make it unusable, increasing cart abandonment rates.

For example, this is how the cart currently looks on iPhone X. Prices are clipped and the announcement bar is obscured.

@paul2009 good call, the issue you mentioned though is the gneral squarespace issue and remains even if i remove all the custom code. can you advise here?