Mobile padding between images on 7.1

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!

Can you share link to page where you inserted images?

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! 

Which padding bottom?

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.

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

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.

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

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.

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 🙂

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

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?

On 5/21/2020 at 1:35 AM, tuanphan said:

Can you share link to page?

Yes! It is www.juliiathompson.com

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?

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;

}

}

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

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

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

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

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

On 4/14/2020 at 11:02 PM, tuanphan said:

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

 

Hi, @tuanphan I am troubleshooting the same issue. I have two pages with masonry galleries. This solution worked great on one page, https://www.angelaart.net/work

But not on this page https://www.angelaart.net/work. Can't figure out why. 

pw: angela

Also, Another issue I have on both of these galleries on mobile is that some of the images are not full width. (See screenshot_). Any idea what could be causing that?

Thanks in advance for any help anyone can offer!
Christine

4 hours ago, christined said:

Hi, @tuanphan I am troubleshooting the same issue. I have two pages with masonry galleries. This solution worked great on one page, https://www.angelaart.net/work

But not on this page https://www.angelaart.net/work. Can't figure out why. 

pw: angela

Also, Another issue I have on both of these galleries on mobile is that some of the images are not full width. (See screenshot_). Any idea what could be causing that?

Thanks in advance for any help anyone can offer!
Christine

 

UPDATE: I think I have fixed both of these issues using this code in my pages' header injection:

<style> @media only screen and (max-width: 800px) { .gallery-masonry .gallery-masonry-item img, .gallery-masonry-wrapper.gallery-masonry-list--ready, .gallery-masonry-item-wrapper { width: 100% !important; height: auto !important; }} @media only screen and (max-width: 800px) { figure.gallery-masonry-item { transform: unset !important; width: 100% !important; padding-bottom: 25px !important; position: relative !important;}} </style>

Found the information here: https://www.ghostplugins.com/free-plugins/1-image-per-row-on-mobile-grid-gallery-masonry