cart style as text on desktop but icon on mobile -- is it possible?

Hi

In my site header I would like my cart element to display as text on desktop but as an icon on mobile but I'm struggling to find code for this?

Can anyone help would be greatly appreciated

C

Hi,

What is your site url?

Hi @tuanphan 

I'm trying to do this too: Client wants cart text on desktop, icon on mobile:

https://wolf-raspberry-fr8r.squarespace.com/
PW: GG24

I might add a custom icon instead of the one that's there. Would the code be different?

Thanks,
Corinne

On 12/17/2023 at 11:03 PM, entrepreneuress said:

Hi @tuanphan 

I'm trying to do this too: Client wants cart text on desktop, icon on mobile:

https://wolf-raspberry-fr8r.squarespace.com/
PW: GG24

I might add a custom icon instead of the one that's there. Would the code be different?

Thanks,
Corinne

Add Cart icon to this position?

Correct, thank you!

Add this to Custom CSS. Replace Pixabay with cart icon

.header-display-mobile a.cart-text-link:before {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2023/11/12/18/52/christmas-8383920_1280.jpg);
    background-size: cover;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
}

Thanks. Is it possible to adjust the height of the (0) to make it more side by side with the icon and hamburger menu? I figured out the bottom-padding, but can't find a selector that doesn't target both bag icon and (0). I just want to target the (0). Thanks!

Use code like this

div.header-display-mobile a.cart-text-link span {
    position: relative;
    top: -5px;
}