How to Move Icons Slightly Left and Keep Them Inline (Dawn Theme Mobile)

[dreamtechzone_5]

Hello, Everyone!
I am using the Shopify Dawn theme. I want to keep the icons slightly to the left in mobile mode and keep the icons in one line.Any help would be greatly appreciated. Thank you!

Store: https://coconutbowlsshop.myshopify.com/
Password: Admin

[suyash1]

@dreamtechzone_5 shopify admin->online store->themes->edit theme code->assets->base.css

@media screen and (max-width:749px){
.footer__list-social .list-social__link{padding: 0.7rem !important;}
}

[dreamtechzone_5]

I don’t want to fix anything in the footer section. I want to keep the social icons in the header section on the left in mobile mode and keep the icons in one line.

[suyash1]

@dreamtechzone_5 update to this

@media screen and (max-width:749px){
.menu-drawer__utility-links .footer__list-social .list-social__link{padding: 0.7rem !important;}
}

[dreamtechzone_5]

Great, can the icons be placed on the left side in mobile mode?

[suyash1]

@dreamtechzone_5 add this and check

 screen and (max-width:749px){.menu-drawer__utility-links .footer__list-social {        justify-content: left;}}

[dreamtechzone_5]

I pasted the code, but it’s not working.

[suyash1]

@dreamtechzone_5 add !important to it and check

@media screen and (max-width:749px){.menu-drawer__utility-links .footer__list-social {justify-content: left !important;}}

[dreamtechzone_5]

But the icons are showing in 2 lines.

[Mustafa_Ali]

Hey @dreamtechzone_5 try this one by follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body>tag if this code work please do not forget to like and mark it solution

<style>
@media screen and (max-width: 767px) {
ul.list-unstyled.list-social.footer__list-social {
    display: -webkit-inline-box !important;
}
}
</style>

[mastroke]

hi @dreamtechzone_5 Go to Edit Code, search for the file component-menu-drawer.css, and paste the following code at the top.

.menu-drawer .list-social__link,
.list-social__link {
    padding: 0.7rem !important;
}

[Wsp]

Hi, @dreamtechzone_5

@media screen and (max-width: 749px) {
    .footer__content-top.page-width {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
}