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 comment

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 comment

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.

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

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
  • 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 comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 3 months later...

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

IMG_7FD997734DD2-1.jpeg

Link to comment
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

IMG_7FD997734DD2-1.jpeg

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.

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

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

223645866_ScreenShot2021-06-09at12_46_52PM.thumb.png.cf9dc8594860f97790ad7fc98e28a96f.png1859837709_ScreenShot2021-06-09at12_46_34PM.thumb.png.2e38e40a49993c9c852394ed24d930c0.png948636832_ScreenShot2021-06-09at1_06_36PM.png.2e1e0828c04c0bf0bf1a81312fb69a7c.png

Screen Shot 2021-06-09 at 12.46.52 PM.png

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...