Squarespace CSS Trick To Hide Images On Mobile

 

You’ve probably heard it everywhere:


“Mobile first, mobile first”


That statement is so true for reasons like SEO but what about the pure aesthetics and flow of it? Fact is that most people nowadays visit your website on their phones only, since phones nowadays are basically mini pocket sized computers.


Different sized screens mean that your website will look different across devices so it’s important to make sure your website looks great on all devices.


Adjusting the mobile settings on your Squarespace site and removing hyphens will help up your Squarespace mobile site but let’s talk mobile images.



 
 Fact is that most people nowadays visit your website on their phones only, since phones nowadays are basically mini pocket sized computers. Different sized screens mean that your website will look different across devices so it’s important to make sure your website looks great on all devices. Learn how to hide images from mobile through Custom CSS & a chrome extension #squarespacetips
 

That beautifully crafted icon that looks so good on desktop may not look as good on mobile so now what? You definitely don’t want to delete it from your desktop version just because it doesn't work on mobile and now you feel stuck on what to do.


I don’t want you feeling stuck anymore so today I will be going over a fairly simple CSS trick to help you hide images from your mobile version.


Step #1:


Make sure you have Google Chrome installed on your computer and once you do then download the Squarespace Collection/Block Identifier extension.


You will need this extension in order to find the block ID of the image you want to hide instead of having to dig around through source code to find it.

 Squarespace Collection:Block Identifier Chrome Extension

Step #2:


Once you have the extension installed it will look like this on your desktop:

 Chrome Extension

Now head on over to the page in which your image is in and click on the extension. Once you click on it then your page will look like this:

 Example of JNL Media Co. Block Id's.

Simply scroll to your image and click on the block ID # to copy it.


Step #3:


Now that you have the block ID # make sure to paste it on a note or word doc and save it since we will be using it in a bit.


After you paste it somewhere then change your device view on your Squarespace backend to mobile by clicking on the mobile icon at the top.

Change "Device View" to Mobile on Squarespace

Step #4:


Now head on over to Design ⇒ Custom CSS and paste this code in:

 

@media only screen and (max-width: 768px) {  

[id="block-yui_3_17_2_1_1528092610085_7683"]{ display: none; }

}


Make sure to replace what’s in between the quotation marks with the block ID # you copied earlier. When you paste it into your code it’s super important that you also delete the # that’s comes before the word block.


So when you you copied it from your clipboard it looks something like this:

 

#block-yui_3_17_2_1_1528092610085_7683


But when you paste it into your code it should look like this:

 

@media only screen and (max-width: 768px) {  

[id="block-yui_3_17_2_1_1528092610085_7683"]{ display: none; }

}


Step #5:


You’re done! Congrats! Now you can hide any image/icon on mobile!


Here is an example of how I used it for my website:

 Before CSS magic

Before CSS magic

 After CSS magic

After CSS magic

 
Jessica Nicasio

Hey , I'm Jessica!

I am the designer and owner behind JNL Media Co.!  I help creative entrepreneurs & small biz owners create a beautiful Squarespace site that converts.  After almost two years in corporate I left so that I could  pursue my love for design + marketing and help other #girlbosses do the same through their business.

Obsessions: Traveling✈️ , Fitness💪🏼, and Writing ✍🏼

Location: Currently living in San Diego, CA 



Categories:

 



Learn more: