Trying to hide an image when displayed on a mobile

I'm currently designing a website, and need to have a vertical line separating some text and a blog highlight.

I've done this by creating an image, and slotting it between the two, and it's exactly what I need.

It looks fine on desktop and tablet, but displays appallingly on mobile, so I would like that image to simply not display on mobiles.

I have tried using various custom CSS that has been provided by other uses on Squarespace answers, but to no avail, however they are generally rather old answers, so I wonder if the fix no longer works.

URL is smilelocum.com/home-wip, the image in question is the vertical green line on the unlinked copy of the home page

Any help would be appreciated.

Thank you Brandon, that has worked perfectly!

You can also use this block identifier in Chrome to get block IDs easily:

https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

How to get the block ID ? The tool doesnt work:https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

@BrandonW I am trying to achieve a similar effect (removing the banner image on mobile only) and have tried using this code for my site (https://lucyeshafer.com/)

This is my code:

@media only screen and (max-width: 640px) { #block-yui3172615081837724105498, #block-yui3172215081837724106801 { display: none; } }

But it is still appearing on mobile. Do you have any tips or can you see in my code what may be going wrong?

Thank you for any help!

Does the same code work for any block or just images?

Also if I create an internal or quick nav menu that is on the top of a page. Is it possible to have it display on the bottom of the page at a certain breakpoint?

@oneagle were you able to figure this out? That code seems to work with text but not banner images? Any help is much appreciated!

Hello!

I need someones help wot this : 

Is there a way I could hide an image block when Displaying on mobile?

This was extremely helpful! Thank you!

On 8/15/2016 at 7:11 AM, brandon said:

Hello. Add the following CSS via the CSS Editor:

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

 

 

Do let me know if this works for you.

-Brandon

---

If this or any other answer helps you out, please give credit where credit is due: Accept the answer if you're the poster or Up-Vote the answer if you're not the poster. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.
 

Hi Brandon - for some reason when I add this to my CSS it says there is a syntax error. This is what I have for my vertical rule: .vertical-rule {display:block;width:2px;background: #749992;height: 900px;}

 and it looks great on the desktop but trying to remove it from my mobile. Any advice is greatly appreciated!

Hi I'm looking to do the same, I want to hide the background on mobile only for 1 page. I have the block ID on chrome, and I did test out other Id's with this code and it works fine, just for some reason not my background?

anyone figure anything out?

this is what I used - Ive used 640px across all mobile edits for size. tried the 768 px to see if it made a difference and it didnt.

it seems to only shift the background image slightly

@media only screen and (max-width: 640px) {
#block-yui_3_17_2_1_1590078744292_9450 {
   display: none;
 }
}

18 hours ago, jenniferboddam said:

Hi I'm looking to do the same, I want to hide the background on mobile only for 1 page. I have the block ID on chrome, and I did test out other Id's with this code and it works fine, just for some reason not my background?

anyone figure anything out?

 

this is what I used - Ive used 640px across all mobile edits for size. tried the 768 px to see if it made a difference and it didnt.

it seems to only shift the background image slightly

 

@media only screen and (max-width: 640px) {
#block-yui_3_17_2_1_1590078744292_9450 {
   display: none;
 }
}

Can you share link to page where you want to hide image?

i was able to hide the image but it left the space where the image was rather than closing it up. i have a page of bios + photos and on mobile it goes on for days. i want to hide the images on mobile but i'm left with giant white spaces where the image was, it's almost worst than having the image. is there a fix for that?
 

On 3/1/2023 at 10:21 PM, moochachanyc said:

i was able to hide the image but it left the space where the image was rather than closing it up. i have a page of bios + photos and on mobile it goes on for days. i want to hide the images on mobile but i'm left with giant white spaces where the image was, it's almost worst than having the image. is there a fix for that?
 

Can you share link to page?

This is close to what I need to do, but the whitespace remains. 

The block I want to hide on mobile is the first block on my page, an image that's inside of a "fluid engine block."

It appears to be identified as:

fe-block fe-block-yui_3_17_2_1_1680573369109_13078