Smaller header icons and bigger logo - only mobile

Store Design
1

Hey, how can I make all the header icons (menu icon, search icon and cart) smaller and the logo bigger only on mobile?

Website: https://www.bafaluc.com

Password: sawbaw

2

@Pam9 ,

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
@media (max-width:320px){
    .logo img{
        max-height:100%;
        padding-right:10px;
    }
    .sidebar__menu-handle, .sidebar__search-handle{
        width:30px;
        padding-top:15px;
    }
    span.icon.icon-cart {
        height: 40px !important;
        width:20px !important;
    }
   .sidebar__cart-handle .count, .sidebar__menu-handle .count, .sidebar__search-handle .count{
       top:22px;
       left:3px;
       font-size: 10.5px;
   }
}

Thanks!

3

Hey @infoatcodelab7 ,

I added the code but nothing changed.

4

Now it works. I changed the max width to 948px. For some reason on the home page the top margin of the logo is less than it is on the home page.