Jump to content

How to hide an icon on mobile but leave it on desktop?

Go to solution Solved by tuanphan,

Recommended Posts

@SelwynGoodman  We can fix that with a little CSS magic!

  • Log into the backend of your website
  • Go to Website > Website Tools > Custom CSS
  • Copy / paste the below CSS and click save

@media screen and (max-width:480px) { #block-#######{
  display:none
  }}

Please note:

  1. This code requires a block # to target the icon. If you share your site, I can update the CSS.
  2. As cell phones change, some large phones may show the icon. You can adjust the max with to 770px, which would hide it on some tablet devices as well.

Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan | Westerly Creative Studio
  
 🍪  Still need your website policies?
Termageddon makes it easy.  
Get 10% off your first year! (< affiliate link) 

Link to comment
  • Solution
On 3/7/2024 at 5:44 AM, SelwynGoodman said:

It’s showing ‘Syntax Error on line 6’ and no change so I’m guessing I need to share the website to you.

 

if you don’t mean copy and paste the url can you show me how to share too, thank you! 

You can use this CSS code

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1709744709073_82335 h1 {
    visibility: hidden;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@SelwynGoodman Oh no, I didn't see your response because you didn't tag me! In the future, click @ and then type the username in. When done correctly, it will appear in a black pill shape like yours does here. Glad @tuanphan got you the finally code! 😊

Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan | Westerly Creative Studio
  
 🍪  Still need your website policies?
Termageddon makes it easy.  
Get 10% off your first year! (< affiliate link) 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.