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

Trying to hide an image when displayed on a mobile

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

Share this post


Link to post

10 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)

Share this post


Link to post
  • 0
Guest

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

Share this post


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!

Share this post


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?

Share this post


Link to post
  • 0

Hello!

I need someones help wot this

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

 

Share this post


Link to post
  • 0
Posted (edited)
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

Share this post


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...