Jump to content

Gallery Top and Bottom Padding on Mobile

Recommended Posts

Site URL: https://elissethurston.com/work/digital

I have fixed the top/bottom padding issues for galleries on desktop. However, on mobile, the padding issues persist. Does anyone have css recs to share to resolve this issue? 

Here is my custom CSS:

.page-section {
    margin-bottom: 0px;
}
[data-section-id="5f9df20d98f8bd6abc88b106"] {
    margin-top: -40px;
}
[data-section-id="5f9df1be03e56c25d62925fe"] {
    margin-top: -40px;
}
[data-section-id="5f9df2e8a48e4130feede9dd"] {
    margin-top: -50px;
}
[data-section-id="5f9df30be9a0e4631af77ec9"] {
    margin-top: -50px;
}
[data-section-id="5f9e030016697f692f4eef3b"] {
    margin-top: -40px;
}
[data-section-id="5f9e030016697f692f4eef3b"] {
    margin-top: -40px;
}
[data-section-id="5f9e030016697f692f4eef3f"] {
    margin-top: -40px;
}
[data-section-id="5f9e030016697f692f4eef43"] {
    margin-top: -40px;
}

 

Screenshot 2020-11-11 075318.png

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

I made a simple work around



@media only screen and (max-width: 640px) {
    section[data-section-id="5f9df20d98f8bd6abc88b106"] .gallery-section-wrapper {
      min-height: 300px !important;
    }
    section[data-section-id="5f9df20d98f8bd6abc88b106"] .gallery-section-wrapper .gallery-slideshow {
          position: absolute;
          left: 0;
          top: -100px;
          width: 100%;
          z-index: 9999;  
    }
}

image.thumb.png.6cb06b20e260b08f5b7bf7cd35ca020a.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Hi @bangank36, thank you for your suggestion! That worked for a few galleries on the page. However, when I tried to implement the same thing in a few other sections, some of the text gets cut off. 

See attached.

Here is the CSS I'm using:

.page-section {
    margin-bottom: 0px;
}
[data-section-id="5f9df20d98f8bd6abc88b106"] {
    margin-top: -40px;
}
[data-section-id="5f9df1be03e56c25d62925fe"] {
    margin-top: -40px;
}
[data-section-id="5f9df2e8a48e4130feede9dd"] {
    margin-top: -50px;
}
[data-section-id="5f9df30be9a0e4631af77ec9"] {
    margin-top: -50px;
}
[data-section-id="5f9e030016697f692f4eef3b"] {
    margin-top: -40px;
}
[data-section-id="5f9e030016697f692f4eef3b"] {
    margin-top: -40px;
}
[data-section-id="5f9e030016697f692f4eef3f"] {
    margin-top: -40px;
}

@media only screen and (max-width: 640px) {
    section[data-section-id="5f9df20d98f8bd6abc88b106"] .gallery-section-wrapper {
      min-height: 300px !important;
    }
    section[data-section-id="5f9df20d98f8bd6abc88b106"] .gallery-section-wrapper .gallery-slideshow {
          position: absolute;
          left: 0;
          top: -100px;
          width: 100%;
          z-index: 9999;  
    }
}
[data-section-id="5f9e030016697f692f4eef43"] {
    margin-top: -40px;
}
@media only screen and (max-width: 640px) {
    section[data-section-id="5f9df1be03e56c25d62925fe"] .gallery-section-wrapper {
      min-height: 300px !important;
    }
    section[data-section-id="5f9df1be03e56c25d62925fe"] .gallery-section-wrapper .gallery-slideshow {
          position: absolute;
          left: 0;
          top: -100px;
          width: 100%;
          z-index: 9999;  
    }
}

@media only screen and (max-width: 640px) {
    section[data-section-id="5f9df2e8a48e4130feede9dd"] .gallery-section-wrapper {
      min-height: 300px !important;
    }
    section[data-section-id="5f9df2e8a48e4130feede9dd"] .gallery-section-wrapper .gallery-slideshow {
          position: absolute;
          left: 0;
          top: -100px;
          width: 100%;
          z-index: 9999;  
    }
}

@media only screen and (max-width: 640px) {
    section[data-section-id="5f9df30be9a0e4631af77ec9"] .gallery-section-wrapper {
      min-height: 300px !important;
    }
    section[data-section-id="5f9df30be9a0e4631af77ec9"] .gallery-section-wrapper .gallery-slideshow {
          position: absolute;
          left: 0;
          top: -100px;
          width: 100%;
          z-index: 9999;  
    }
}

@media only screen and (max-width: 640px) {
    section[data-section-id="5f9e030016697f692f4eef3b"] .gallery-section-wrapper {
      min-height: 300px !important;
    }
    section[data-section-id="5f9e030016697f692f4eef3b"] .gallery-section-wrapper .gallery-slideshow {
          position: absolute;
          left: 0;
          top: -100px;
          width: 100%;
          z-index: 9999;  
    }
}
@media only screen and (max-width: 640px) {
    section[data-section-id="5f9e030016697f692f4eef3b"] .gallery-section-wrapper {
      min-height: 300px !important;
    }
    section[data-section-id="5f9e030016697f692f4eef3b"] .gallery-section-wrapper .gallery-slideshow {
          position: absolute;
          left: 0;
          top: -100px;
          width: 100%;
          z-index: 9999;  
    }
}
@media only screen and (max-width: 640px) {
    section[data-section-id="5f9e030016697f692f4eef3f"] .gallery-section-wrapper {
      min-height: 300px !important;
    }
    section[data-section-id="5f9e030016697f692f4eef3f"] .gallery-section-wrapper .gallery-slideshow {
          position: absolute;
          left: 0;
          top: -100px;
          width: 100%;
          z-index: 9999;  
    }
}

 

Screen Shot 2020-11-14 at 9.01.49 AM.png

Screen Shot 2020-11-14 at 9.01.56 AM.png

Link to comment
  • 2 weeks later...
  • 9 months later...

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.