How I can chagne width these Icons on mobile verion on Dawn Theme?

[Ecomsmartify]

How I can change width these Icons on mobile verion on Dawn Theme? I want these Icons to left and right side bit on header please anyone help Thanks.

Store Link: https://tesdmo.myshopify.com/

 

[ZestardTech · Accepted solution]

Hi @Ecomsmartify 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

@media (max-width: 767px){
.header-wishlist-icon {
padding-top: 0;
}
.header {
padding: 0 1.5rem !important;
}
.header__icons {
padding: 0;
align-items: center;
gap: 10px;
}
.header__icon--search {
padding-left: 25px;
}
.header__heading-link {
    padding: 0;
}
}

[suyash1]

@Ecomsmartify - password to view page?

[GTLOfficial]

Hello @Ecomsmartify 
your link is password protected.

[ZestardTech]

Hi @Ecomsmartify 

Please share your store password.
So that I will check and let you know the exact solution here.

[Ecomsmartify]

HI @ZestardTech @GTLOfficial @suyash1 store Password is : 4 . Thanks in advance 😍😍

[suyash1]

@Ecomsmartify - css below will change the size of icons, please add it to the very end of your base.css file and check

@media only screen and (max-width:549px){
 .header__icon .icon, .header-wishlist-icon svg {height: 20px;    width: 20px;}
svg.icon.icon-cart-empty, svg.icon.icon-cart {height: 4rem; width: 4rem;}

}

[suyash1]

@Ecomsmartify - to move icons to left and right, please add this as well

@media only screen and (max-width:549px){
.header{padding: 8px 1rem 8px 1rem;}
}

[dws_pvt_ltd]

Hello @Ecomsmartify, Please follow these steps to add this CSS code:
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file. 

@media only screen and (max-width:549px){
 .header__icon .icon, 
 .header-wishlist-icon svg {
    height: 16px;
    width: 16px;
 }
 svg.icon.icon-cart-empty,
 svg.icon.icon-cart {
    height: 3rem;
    width: 3rem;
 }
 .header-wishlist-icon #wishlist-count {
    height: 1.2rem;
    width: 1.2rem;
    font-size: 10px;
    bottom: .8rem;
    left: 25px;
 }
 .cart-count-bubble {
    height: 1.2rem;
    width: 1.2rem;
    font-size: 9px;
    bottom: .8rem;
    left: 2.2rem;
 }
}

See the screenshot below,

Feel free to reach out if you have any questions or need assistance.

Best Regards,

DWS.

[Ecomsmartify]

Hey @dws_pvt_ltd thanks for sending the code I have try this code after adding this code I see this code change/dcrease icon sizes. Actually I want to move my Icons (Wishlist, account, search, cart, cartempty) to the right side on header and Drawer icon move to the left . Thanks alot I appriciate

[ZestardTech]

Hi @Ecomsmartify 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

@media (max-width: 767px){
.header-wishlist-icon {
padding-top: 0;
}
.header {
padding: 0 1.5rem !important;
}
.header__icons {
padding: 0;
align-items: center;
gap: 10px;
}
.header__icon--search {
padding-left: 25px;
}
}

[GTLOfficial]

Hello @Ecomsmartify 
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
and add this code at the end of the file.

@media only screen and (max-width:549px){
.header {
  padding: 8px 1rem 8px 1rem !important;
}
}

and the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks

[Ecomsmartify]

hi this is good but I don't want to decrase my header padding width/height I want my header like the refrrence site below thanks 😍😊
Referrence website:  https://krosskulture.com/

[ZestardTech · Accepted solution]

Hi @Ecomsmartify 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

@media (max-width: 767px){
.header-wishlist-icon {
padding-top: 0;
}
.header {
padding: 0 1.5rem !important;
}
.header__icons {
padding: 0;
align-items: center;
gap: 10px;
}
.header__icon--search {
padding-left: 25px;
}
.header__heading-link {
    padding: 0;
}
}

[Ecomsmartify]

Thanks it's working perfectly thanks you are amazing 😍😍😍

[ZestardTech · Accepted solution]

Hi @Ecomsmartify 

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful then please Like and Accept Solution.