Centering gallery-reel-item for mobile view

Site URL: https://kyuno.de/home-2

Hello everyone,

I centered all the icons in the Gallery Reel with this css Code for the desktop view:

section[data-section-id="62627dec9367b93bf998045c"]

.gallery-reel-item {
  margin-top: 3.5vw;
 
}

Now I also want the icons centered in the mobile version. 

the URL is www.kyuno.de/home-2

Password: kyuno

hope someone can help me 🙂

You mean center vertically?

yes vertically 🙂

On 5/5/2022 at 9:33 PM, waiki said:

yes vertically 🙂

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
.gallery-reel {
    height: 25vh !important;
}
[data-section-id="62627dec9367b93bf998045c"] {
    min-height: unset !important;
    height: 25vh !important;
}}

Hi Tuanphan,

I added the CSS Code. Unfortunately the icons aren't vertically centered and a small white bar appears every time when the icons move to the left.

Did I do something wrong with your provided code?

Best greetings Waiki

On 5/9/2022 at 2:31 PM, waiki said:

Hi Tuanphan,

I added the CSS Code. Unfortunately the icons aren't vertically centered and a small white bar appears every time when the icons move to the left.

Did I do something wrong with your provided code?

Best greetings Waiki

Remove code I sent & try this new code

@media screen and (max-width:767px) {
section[data-section-id="62627dec9367b93bf998045c"] .gallery-reel-item {
    margin-top: 3.5vw;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
}
}

Wonderful Tuan, it works! You are my Squarespace hero!

Thank you very much and also thank you for your help via email 🙂