A shopify partner showed me how to change my customized cart icon svg heigh and it worked, but only on my PC. It’s been related that on some other computers and cellphones the cart logo heigh is incorrect, just like on the following picture. How can I correct it? Thanks! Site: Avvoyer.com Password: seipra
Topic summary
A user is experiencing inconsistent cart icon height across different devices after a Shopify partner helped customize it. The icon displays correctly on their PC but appears incorrectly sized on other computers and mobile phones, as shown in attached screenshots.
Proposed Solutions:
Two support representatives offered assistance:
- PageFly representative requested the website URL to provide specific help
- BSSCommerce representative provided a CSS code solution:
- Navigate to: Shopify Admin → Online Store → Theme → Edit code
- Locate the
theme.liquidfile - Add CSS within
<style>tags in the<head>section - The code uses a media query (
@media only screen and (max-width: 767px)) to set fixed height and width (2.2rem) for the cart icon on mobile devices
Status: The discussion remains open, awaiting user feedback on whether the proposed CSS solution resolves the cross-device display issue.
This is Noah from PageFly - Shopify Page Builder App
I can help you. Please can you provide the website url. Thank you.
Best regards,
Noah | PageFly
Hi @Avvoyer ,
You can try this code by following these steps:
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Inside tag head. You need create style tags. After you’ll insert my code inside it
@media only screen and (max-width: 767px) {
.header__icon--cart .icon {
height: 2.2rem !important;
width: 2.2rem !important;
}
}
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 