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

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Which padding bottom?

image.thumb.png.cb9de3dc128063e191af63cb7400011f.png

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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