Squarespace Code Magic: Hiding Images on Mobile


One of my favorite things in website design is finding that *perfect* line of code that just -TA DA's- and it's like beautiful nerdy magic.

Squarespace is an awesome platform, obviously there are a lot of reasons I think so, but one of them is the ability customize with ease! 

You can obviously hop on Squarespace, create an account, take a pre-made template, upload your copy and logo, and that is it - OR you can customize with some coding, and it can truly be one of a kind. 

One of my biggest annoyances would be the mobile view of web pages. When I create a cute little doodle, and it looks perfect on the desktop view... then I open it on mobile and it's just like BAM! A huge image taking up the whole screen and not even remotely in the correct location. What a buzz-kill.

That is, until I found the most beautiful little Google Chrome plug in + line of code. **Cue nerd dance**

The Google Chrome add on is the Squarespace Collection/Block Identifier. This add on *magically* tells you what an image/section's block code is, without having to search through complicated back-end coding. 

What's a block code good for LJ? This helps the code we are going to use target the EXACT item that we want to make disappear. 

example of a block code: #block-59e79c73e9bfdfe2cd1443c8

You simply add the Chrome plug in to your toolbar, open your website, click the plug in, and the block codes appear, and can be copied straight to your clipboard! 

Block Code Identifier

Now, once you identify the block code, you will go into your Custom CSS and add the following code:

@media only screen and (max-width: 768px) {
#block-8fc91e9563250a77172c {display: none;}

Now this:


"Hang Tag" Graphic

Website Screenshot

Will look like this on Mobile:


No "hang tag" graphic!

Mobile Website Screenshot

And that is it! MAGIC! Let me know if you find this useful, I am going to try to have a few 'Squarespace Code Magic' posts! Anything you're curious about? Drop it in the comments!


xx LJ

LJ Media House Blog
Pin This!.png