Dawn theme mobile view header cart icon and wishlist icon - troubleshooting

Store Design
, , , ,
1

I’m using the Dawn theme, in that I want to change the cart icon and heart icon size to a similar size. The desktop is good, but in mobile view, the size of both the icons is different. Can you please help me to sort this out.

website: https://ambersilverz.myshopify.com/

password: amber

image
image364×658 49.3 KB

1 Like
2

Hello @Sivadarshan

Centering your logo on mobile is a great design choice, and you can achieve it with a quick CSS edit.

For safety, first be sure to duplicate your theme and make the following change on the new copy. In your theme’s code editor, navigate to the Assets folder, open the base.css file, and paste this exact code at the very bottom:

@media (max-width: 768px) {
    header.header {
        display: grid !important;
    }
}

This code adjusts the mobile header’s grid to perfectly center your logo while keeping the menu and cart icons symmetrically balanced. After you save the file, preview the change on a mobile device, and if everything looks correct, you’re ready to publish the theme.

Hope this helps!

3

Hello @Sivadarshan

  • In your Shopify admin → Online Store → Themes → Customize
  • Click the Theme settings → Custom CSS (or “Edit code” → base.css / theme.css)
@media screen and (max-width: 767px) {
    .header__icons.header__icons--localization.header-localization {
        align-items: center;
    }
}

image
image367×112 7.58 KB