Jump to content

How to resize cart icon only on mobile?

Recommended Posts

  • Replies 3
  • Views 194
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Add the following to Design > Custom CSS.

@media only screen and ( max-width : 639px ) {
  span.Cart-label:after {
    height : calc( 70px / 1.5 );
    width : calc( 42px / 1.5 );

I tried 50% but it seemed a little small so I went 1.5 on the calc. You can use a calc or just enter in whatever numbers you want.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

This didn't affect my other code sadly, it seems my code is overwriting it. 


// Custom Cart Icon //

.header .header-actions-action--cart .icon {
  background: url(IMAGE) center no-repeat;
  stroke: transparent !important;
  content: "";
  background-size: contain;
width: 60px;
  height: 100px;

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.