Jump to content

Gap after gallery sections

Recommended Posts

Site URL: https://rhurtado-new.squarespace.com/

Hi everyone! I'm trying to build an image gallery and wanted to display more than 6 images in a row, both on desktop and on mobile.

I used this code as a header injection on the page and it worked great:


@media(min-width: 100px) {
  .gallery-grid-wrapper {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important;
    height: 100% !important;

The only issue is that I have the galleries organized in an accordion (Will Myer's Accordion Pro plugin) and when I expand the accordion sections, there's a big space under each gallery section. This only happens in the beginning, if I close and open the accordion sections, the gap disappears. If I remove the code above, there is no gap when expanding the accordion sections. 

I'd love any thoughts on how to fix this, thank you!

Link to comment
  • Replies 3
  • Views 357
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

On 7/31/2022 at 2:55 PM, ramonhurtado said:

Hi tuanphan, here's a video showing the issue. Thanks for looking!

Try adding to Design > Custom CSS

/* gap mobile */
@media screen and (max-width:767px) {
.open .accordion-content {
    height: auto !important;


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

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

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.