Reduce size of header icons on mobile version - dawn theme

Store Design
, ,
1

I would like to know how to reduce the size of the icons in my header ONLY on the mobile version of my site. Thanks

IMG_24D1CDF7EFA9-1.jpeg
IMG_24D1CDF7EFA9-1.jpeg1242×2688 142 KB

2

Hi @ciandastudio , can you share your store url?

3

www.hillscollide.com
hcvisitor

4

@ciandastudio , go to base.css and add the following

@media (max-width:768px){
  .header__icon .icon {
  
    width: 1.5rem !important;
   
}

}

code:

5

Hi @ciandastudio ,

To make icon smaller in mobile

Here is the code

@media only screen and (max-width: 970px){
.header__icon .icon {
    width: 1.5rem;
}
.header__icon--cart .icon {
    height: 3.4rem;
}
}

Paste this code in base.css

Hope this code will work.

Best Regards

Team_OSC

6

no luck unfortunately

7

this didn’t work unfortunately, did you have any other suggestions?

8

You can paste this code in base.css

@media only screen and (max-width: 970px){
.header__icon .icon {
    width: 1.8rem;
}
.header__icon--cart .icon-cart-empty  {
    height: 3.4rem;
}
}

After this

  1. Go to Assets

  2. Search icon-cart-empty.liquid

  3. There is a class using with name icon

  4. Remove that class name from svg

  5. Then Save it and refresh the page to see the changes.

Hope this code will work.

Best Regards,

Team_OSC

9

@ciandastudio , I don’t see the code I provided you in base.css

10

Hello @ciandastudio ,

Please follow the below mentioned steps to reduce the size of the header icon.

Steps -:

  1. Go to Online Store → Themes → Click on Three dots(Action) → Edit code.

  2. Search for the theme.liquid file and open it.

  3. Next add the below mentioned code at the bottom of the theme.liquid file before tag.

@media (max-width:430px) { summary.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle { height: 4.4rem; width: 1.4rem; } a#cart-icon-bubble { height: 4.4rem; width: 3.4rem; } }
  1. Save

After implementing code, output will look like this → https://prnt.sc/TwfEwrn6tCdK

I hope the code helps you.

Please let me know if you have any query or need any assistance.

Thank you.

1 Like
11

Thankyou, I will try that
Can the menu icon also be reduced to the same size?

12

Thankyou, I will try that
Can the menu icon also be reduced to the same size?

13

Hello @ciandastudio ,

Yes, it can be possible.

Please add the below mentioned code in your theme.liquid file (You have to follow the previously shared steps for adding the code)

@media (max-width:430px) { svg.icon.icon-hamburger { height: 3.4rem; width: 1.4rem; } }

Output → https://prnt.sc/0X3YtZkkgJT3

I hope it helps.

Please let me know if you have any query.

Thank you.

1 Like