Hi everyone, do you know why I see the cart icon of the right size on desktop but bigger on smartphone? A thousand thanks
https://refade-8966.myshopify.com/
password:e refade
Topic summary
A user is experiencing an issue where their cart icon displays at the correct size on desktop but appears larger on mobile devices.
Proposed Solutions:
Two community members suggested adding CSS media queries to the base.css file to control the cart icon size on screens under 989px width:
- Initial suggestion: Set
.header__iconand.cart-iconheight/width to 2.3rem - Refined solution: Add
!importantflags to ensure the CSS rules override existing styles (height and width set to 2.4rem or 2.3rem depending on the response)
Current Status:
The discussion remains open. The original poster reported that the first CSS solution without !important flags did not resolve the issue. The conversation includes code snippets and screenshots demonstrating the problem and proposed fixes, but no confirmation yet that the updated solution with !important worked.
1 Like
Add this code in your base.css:
@media (max-width: 989px) {
.header__icons {
gap: 10px;
}
.header__icon, .header__icon--cart .icon {
height: 2.3rem;
width: 2.3rem;
}
}
It didn’t work unfortunately
Hi @Marco211
Check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 989px){
.header__icon--cart .icon {
height: 2.4rem !important;
width: 2.4rem !important;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
Add !important at the end…
@media (max-width: 989px) {
.header__icons {
gap: 10px;
}
.header__icon, .header__icon--cart .icon {
height: 2.3rem !important;
width: 2.3rem !important;
}
}