ScottMed Posted April 13, 2020 Share Posted April 13, 2020 (edited) Site URL: https://scottmedway1.squarespace.com/general-5 Hello! I am trying in vain to use my custom CSS to increase the bottom padding between images when using a Gallery block on Squarespace 7.1 viewed on mobile. The space between each image is a bit too tight for my taste. I have looked everywhere in the knowledgebase with no results, am I missing something obvious? Thank you! Edited April 13, 2020 by ScottMed Link to comment
tuanphan Posted April 14, 2020 Share Posted April 14, 2020 Can you share link to page where you inserted images? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
ScottMed Posted April 14, 2020 Author Share Posted April 14, 2020 40 minutes ago, tuanphan said: Can you share link to page where you inserted images? The url should be linked in my original post. Thanks! Link to comment
tuanphan Posted April 14, 2020 Share Posted April 14, 2020 Which padding bottom? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
ScottMed Posted April 14, 2020 Author Share Posted April 14, 2020 (edited) Hi tuanphan, thanks for your help. My site looks different on an actual mobile device -- the images do not appear as columns, they are stacked. I've attached a screenshot with the circled area where I'm trying to add padding. Edited April 14, 2020 by ScottMed Link to comment
tuanphan Posted April 15, 2020 Share Posted April 15, 2020 Add to Home > Design > Custom CSS @media screen and (max-width:767px) { [data-section-id="5e94c4503f49493c11a99fff"] figure.gallery-masonry-item { margin-top: 10px; margin-bottom: 10px; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
ScottMed Posted April 15, 2020 Author Share Posted April 15, 2020 Hi tuanphan, sorry, but that did not seem to work. I tweaked it a bunch to see if I could troubleshoot but no dice. Just FYI the gallery has the lightbox option turned on. Could that change the code? Thanks for your help. Link to comment
LuckyAndSon Posted April 26, 2020 Share Posted April 26, 2020 Was there any solution to this? I'm trying to remove all image padding from a portfolio gallery top and bottom on mobile (as it displays correctly with no padding currently in full screen) but it seems no CSS is working in 7.1? https://www.luckyandson.co/our-work/loveandwonder Link to comment
tuanphan Posted April 26, 2020 Share Posted April 26, 2020 9 minutes ago, LuckyAndSon said: Was there any solution to this? I'm trying to remove all image padding from a portfolio gallery top and bottom on mobile (as it displays correctly with no padding currently in full screen) but it seems no CSS is working in 7.1? https://www.luckyandson.co/our-work/loveandwonder Add to Page Settings > Advanced > Header <style> @media screen and (max-width:767px) { figure.gallery-masonry-item { padding-bottom: 0 !important; } } </style> When you're done, reload your site & check. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
LuckyAndSon Posted April 28, 2020 Share Posted April 28, 2020 Thank you so much, I don't have the premium account so couldn't add it into the header section but I just added a code block to the top of the page. All working now 🙂 tuanphan 1 Link to comment
jthompsonrhn Posted May 20, 2020 Share Posted May 20, 2020 Hello! I have the same issue, but I would like to have 3 images show on mobile instead of 1. Here is my code so far: @media screen and (max-width:640px) { .gallery-grid--layout-grid .gallery-grid-wrapper { grid-template-columns: repeat(3,auto) !important; } } This works but there is still padding above and below each set of 3 images. Any help would be appreciated!! Link to comment
tuanphan Posted May 21, 2020 Share Posted May 21, 2020 9 hours ago, jthompsonrhn said: Hello! I have the same issue, but I would like to have 3 images show on mobile instead of 1. Here is my code so far: @media screen and (max-width:640px) { .gallery-grid--layout-grid .gallery-grid-wrapper { grid-template-columns: repeat(3,auto) !important; } } This works but there is still padding above and below each set of 3 images. Any help would be appreciated!! Can you share link to page? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
jthompsonrhn Posted May 22, 2020 Share Posted May 22, 2020 On 5/21/2020 at 1:35 AM, tuanphan said: Can you share link to page? Yes! It is www.juliiathompson.com Link to comment
tuanphan Posted May 25, 2020 Share Posted May 25, 2020 On 5/23/2020 at 1:46 AM, jthompsonrhn said: Yes! It is www.juliiathompson.com Have you solved yet? If no, where is gallery? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
SarahKin Posted January 17, 2021 Share Posted January 17, 2021 Wondering if i'm able to reduce the white space below my image here? I have used the following code to reduce the space above but can't figure out how to do the below. Thanks, @media screen and (max-width:767px) { #page article section:first-child { padding-top: 0px !important; } } Link to comment
tuanphan Posted January 23, 2021 Share Posted January 23, 2021 On 1/18/2021 at 4:04 AM, SarahKin said: Wondering if i'm able to reduce the white space below my image here? I have used the following code to reduce the space above but can't figure out how to do the below. Thanks, @media screen and (max-width:767px) { #page article section:first-child { padding-top: 0px !important; } } Can you share link to page in screenshot? We can help easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
JessScarcella Posted May 21, 2021 Share Posted May 21, 2021 I'm having a similar issue but with the gallery margins on mobile. I need to reduce the space between the copy and the gallery and then the space between the gallery caption and the next section. I used this code and it's working but not exactly how I need it to. You'll see it's actually cutting off some of the copy even though it's still very far away from the section above. @media only screen and ( pointer : coarse ) and ( max-width : 1024px ), screen and ( max-width : 799px ) { [data-section-id="60a2c98eb425ae21a5a143ca"] {margin-top: -18%; margin-bottom: -18%} } @media only screen and ( pointer : coarse ) and ( max-width : 1024px ), screen and ( max-width : 799px ) { [data-section-id="6080e6d82cca634360115de2"] {margin-bottom: -15% !important} } Website: https://takesunset.squarespace.com/buy-with-us PW: TakeSunset Link to comment
tuanphan Posted May 24, 2021 Share Posted May 24, 2021 On 5/21/2021 at 10:28 PM, JessScarcella said: I'm having a similar issue but with the gallery margins on mobile. I need to reduce the space between the copy and the gallery and then the space between the gallery caption and the next section. I used this code and it's working but not exactly how I need it to. You'll see it's actually cutting off some of the copy even though it's still very far away from the section above. @media only screen and ( pointer : coarse ) and ( max-width : 1024px ), screen and ( max-width : 799px ) { [data-section-id="60a2c98eb425ae21a5a143ca"] {margin-top: -18%; margin-bottom: -18%} } @media only screen and ( pointer : coarse ) and ( max-width : 1024px ), screen and ( max-width : 799px ) { [data-section-id="6080e6d82cca634360115de2"] {margin-bottom: -15% !important} } Website: https://takesunset.squarespace.com/buy-with-us PW: TakeSunset Remove your code & add this code to Design > Custom CSS > Then save & reload the site /* Mobile-Remove top bottom slideshow padding */ @media screen and (max-width:767px) { .gallery-slideshow.preFade.fadeIn { height: 35vh !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
StacyB95 Posted June 9, 2021 Share Posted June 9, 2021 Hello! I'm having the same issue with excess padding on slideshows in mobile. I was able to add the slideshows as blocks within a section on another site and it looks great, but I contacted SquareSpace and they said you can no longer add slideshows as blocks (which is extremely frustrating). I tried the code above and it doesn't work for me. Any help would be appreciated! https://www.thevineonfrancisstreet.com/condos Link to comment
tuanphan Posted June 10, 2021 Share Posted June 10, 2021 16 hours ago, StacyB95 said: Hello! I'm having the same issue with excess padding on slideshows in mobile. I was able to add the slideshows as blocks within a section on another site and it looks great, but I contacted SquareSpace and they said you can no longer add slideshows as blocks (which is extremely frustrating). I tried the code above and it doesn't work for me. Any help would be appreciated! https://www.thevineonfrancisstreet.com/condos Add to Design > Custom CSS > Then save & reload the site /* Mobile slide padding */ @media screen and (max-width:767px) { .gallery-slideshow { height: 30vh !important; } } clairebrear 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment