Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Trying to hide an image when displayed on a mobile


Hamseen
Go to solution Solved by brandon,

Question

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.

Edited by Hamseen
Link to post
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

12 answers to this question

Recommended Posts

  • 2

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.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to post
  • 0
Guest

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

Link to post
  • 0

@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!

Link to post
  • 0

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?

Link to post
  • 0
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!

Edited by CZArt
Link to post
  • 0

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;
 }
}

Link to post
  • 0
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?

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...