Gallery Top and Bottom Padding on Mobile

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;
}

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;  
    }
}

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;  
    }
}

On 11/15/2020 at 12:02 AM, elisset said:

See attached.

Here is the CSS I'm using:

Hi. Do you still need help on this?

Yes, I do! @tuanphan

Has anyone solved this issue? It’s feels like a bad bug, that I keep encountering on clients sites as well as my own….