David_Cass Posted May 12, 2021 Posted May 12, 2021 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
tuanphan Posted May 14, 2021 Posted May 14, 2021 Hi. Default, spacer block is hidden on mobile. Can you take a screenshot of uneven gaps? We can check easier. 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!)
David_Cass Posted May 24, 2021 Author Posted May 24, 2021 @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
tuanphan Posted May 24, 2021 Posted May 24, 2021 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 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!)
David_Cass Posted June 3, 2021 Author Posted June 3, 2021 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
tuanphan Posted June 3, 2021 Posted June 3, 2021 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!)
David_Cass Posted June 4, 2021 Author Posted June 4, 2021 @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
tuanphan Posted June 4, 2021 Posted June 4, 2021 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!)
Recommended Posts
Archived
This topic is now archived and is closed to further replies.