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

Mobile padding between images on 7.1


Recommended Posts

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 by ScottMed
Link to post
  • Replies 15
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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 🙂

Posted Images

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.

unnamed.jpg.18e33d31b5b953a03b1d8ce54912e143.jpg

Edited by ScottMed
Link to post

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

 

Link to post

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 post
  • 2 weeks later...
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.

Link to post
  • 4 weeks later...

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 post
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?

Link to post
  • 7 months later...

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;

}

}

Screen Shot 2021-01-18 at 10.02.13 AM.png

Link to post
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;

}

}

Screen Shot 2021-01-18 at 10.02.13 AM.png

Can you share link to page in screenshot? We can help easier

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