elisset Posted November 11, 2020 Posted November 11, 2020 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; }
Beyondspace Posted November 12, 2020 Posted November 12, 2020 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; } } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
elisset Posted November 14, 2020 Author Posted November 14, 2020 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; } }
tuanphan Posted November 20, 2020 Posted November 20, 2020 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? 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!)
Jase_studio Posted September 4, 2021 Posted September 4, 2021 Has anyone solved this issue? It’s feels like a bad bug, that I keep encountering on clients sites as well as my own….
Recommended Posts
Archived
This topic is now archived and is closed to further replies.