Jump to content

Remove spacer blocks using CSS, on one page only

Recommended Posts

Posted

Site URL: https://davidcass.art/latest

Hello. On this page (davidcass.art/latest) I've deliberately used a staggered design. On laptop, desktop & tablet, I'm happy with this. On mobile, however, the placing of the spacers makes uneven gaps between the artworks. Is there a way to ignore spacer blocks on mobile on this single page? I can't do this site-wide as I rely on spacers elsewhere in my site. Thanks so much. David

  • Replies 7
  • Views 1.2k
  • Created
  • Last Reply
  • 2 weeks later...
Posted

@tuanphan– thanks so much for your reply. I'm attaching an image below, with some roughly placed green dots to show spacing inconsistencies. 

(also, I think spacer blocks do indeed show on my mobile site, I've tried completely removing them and there is a difference)

Appreciate your help! David

IMG_7375.jpg

Posted
43 minutes ago, David_Cass said:

@tuanphan– thanks so much for your reply. I'm attaching an image below, with some roughly placed green dots to show spacing inconsistencies. 

(also, I think spacer blocks do indeed show on my mobile site, I've tried completely removing them and there is a difference)

Appreciate your help! David

IMG_7375.jpg

Try adding to Design > Custom CSS

/* Mobile-Remove spacer blocks */
@media screen and (max-width:767px) {
.spacer-block {
    display: none !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 2 weeks later...
Posted

Thank you @tuanphan - this does work, but it removes the spacers across the whole site. I need it for one index page only.  Is there a custom CSS code which would make the same result on one index only?

Thank you again! D

Posted
9 hours ago, David_Cass said:

Thank you @tuanphan - this does work, but it removes the spacers across the whole site. I need it for one index page only.  Is there a custom CSS code which would make the same result on one index only?

Thank you again! D

try this

/* Mobile-Remove spacer blocks */
@media screen and (max-width:767px) {
body#collection-5fcfc8e228714b03f1bb3502 .spacer-block {
    display: none !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

@tuanphan – superb! Thank you very much. Really appreciate it. May I ask, how did you isolate it to one page only? Does the line:

body#collection-5fcfc8e228714b03f1bb3502

refer specifically to the index page section containing the paintings?

With gratitude,

David

Posted
6 hours ago, David_Cass said:

@tuanphan – superb! Thank you very much. Really appreciate it. May I ask, how did you isolate it to one page only? Does the line:


body#collection-5fcfc8e228714b03f1bb3502

refer specifically to the index page section containing the paintings?

With gratitude,

David

It is page id. each page has a specific id. See how to find page id.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.