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

Mobile padding between images on 7.1

Recommended Posts

Posted (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 by ScottMed

Share this post


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

Share this post


Link to post
Posted (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.

unnamed.jpg.18e33d31b5b953a03b1d8ce54912e143.jpg

Edited by ScottMed

Share this post


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

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


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.

Share this post


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


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

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 🙂

Share this post


Link to post

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

Share this post


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?


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


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