How can I make social media icons disappear on smaller devices?

Store Design
, , , ,

Topic summary

A user wants to hide social media icons on smaller devices (mobile/iPad), specifically when the navigation menu switches to a hamburger menu.

Proposed Solution:

  • Open the base.css file in the Assets folder
  • Add CSS media query code at the end:
@media only screen and (max-width: 990px) {
  ul.footer__list-social.list-social.unstyled-list.list-social {
    display: none;
  }
}

Current Status:
The discussion remains unresolved. The original poster reported that the suggested CSS solution did not work as expected. No alternative solutions or troubleshooting steps have been provided yet.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

Hi, i want t the social media icons to disappear when they get into smaller devices such as mobile or ipad

ideally when the menu changes into a burger menu

hasanali1_0-1681136600554.png
hasanali1_0-1681136600554.png1912×645 124 KB

any help is appreciated !

https://marthajewelry.myshopify.com/

password - test

2

Hi @hasanali1 ,

I understand that you want to hide the social icons for smaller screens. Please follow the instructions below to do so.

  1. From the Admin page, go to Online store > Theme > Click the three dots > Edit code
  2. Open the base.css file under the Asset folder
  3. Add the code below at the very end
@media only screen and (max-width: 990px) {
ul.footer__list-social.list-unstyled.list-social {
    display: none;
}
}
3

hi, this does not seem to work ;(

4

solved