Jump to content

Remove padding above and below gallery block in mobile view

Recommended Posts

Posted

Hello.

I am using the Miller template and I have created a full bleed gallery grid block on one of the index pages.

The website is: https://chinchilla-shallot.squarespace.com and the password is: Testing

The top and bottom borders/spacing/padding are acceptable enough on a desktop:

alt text

However, on a mobile there is too much border/spacing/padding above and below the gallery block:

alt text

No matter what I try, I just can't seem to reduce it.

I have tried lots of different things including all of the following gallery css variations, but nothing seems to work, or it just messes other regular image blocks up on the website.


@media only screen and (max-width: 640px)
    { .sqs-gallery-design-grid-slide .sqs-block.gallery-block .sqs-block-gallery .sqs-block { padding: 0px !important;  } }

And also:

@media only screen and (max-width: 640px) { .sqs-block.gallery-block {
 padding-top: 0px !important;
 padding-bottom: 0px  !important;
 padding-left: 0px !important;
 padding-right: 0px !important; }
.sqs-layout .sqs-row .sqs-block:first-child { padding-top: 0px !important; }
.sqs-layout .sqs-row .sqs-block:last-child { padding-bottom: 0px !important; } }

This is getting really frustrating that I can't seem to fix it, so I would really appreciate any help to resolve this issue.

I just want the gallery blocks to be full bleed on both desktop and mobile, with no unnecessary padding, without affecting any other blocks or image blocks elsewhere on the website or on other index pages.

Thank you for your help.

gallery-block-grid-padding-desktop.jpg.8d7a59463525f68605f83bfafc332aaa.jpg

gallery-block-grid-padding-mobile.jpg.df84633dab99132681b0923026f074c3.jpg

Fashion and portrait photographer

  • Replies 8
  • Views 3.1k
  • Created
  • Last Reply
  • 1 year later...
Posted
6 hours ago, pottedplant77 said:

@tuanphan how do i remove padding above and below the gallery block in mobile view? on desktop view its fine but mobile view it ends up looking like this:

i'm using Slideshow:Simple with thumbnails for this gallery section

https://www.truemedical.sg/true-chat (mobile view)

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.gallery-slideshow {
    margin-bottom: 0 !important;
}
[data-section-id="5f3a3bfddc500a47eb3fd74a"] {
    min-height: unset !important;
    height: 80vh;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
1 hour ago, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:767px) {
.gallery-slideshow {
    margin-bottom: 0 !important;
}
[data-section-id="5f3a3bfddc500a47eb3fd74a"] {
    min-height: unset !important;
    height: 80vh;
}
}

 

that worked perfectly, thank you so much!! @tuanphan

Posted
2 hours ago, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:767px) {
.gallery-slideshow {
    margin-bottom: 0 !important;
}
[data-section-id="5f3a3bfddc500a47eb3fd74a"] {
    min-height: unset !important;
    height: 80vh;
}
}

 

on that note, do you know how i can display the gallery image thumbnails on mobile view as well? currently can only see the thumbnails below the image on desktop view, and they disappear in mobile view. @tuanphan

Posted
21 hours ago, pottedplant77 said:

on that note, do you know how i can display the gallery image thumbnails on mobile view as well? currently can only see the thumbnails below the image on desktop view, and they disappear in mobile view. @tuanphan

Which image thumbnails? Can you take a screenshot?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.