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 🙂

This worked well, but for some reason it eliminated all the custom fonts on my site (installed with CSS).

Also, the nav arrows beneath the gallery look different and I can't seem to change them with CSS. There is a grey square background and the arrow color changed from orange to black.

the site is cloisterwatch.com and I'm looking at the gallery on the home page.

Any ideas? Thanks!

On 2/21/2024 at 9:10 PM, interlopr said:

This worked well, but for some reason it eliminated all the custom fonts on my site (installed with CSS).

Also, the nav arrows beneath the gallery look different and I can't seem to change them with CSS. There is a grey square background and the arrow color changed from orange to black.

the site is cloisterwatch.com and I'm looking at the gallery on the home page.

Any ideas? Thanks!

#1. Maybe you added code to wrong position, or wrap font code in this code. Try move the code to bottom of CSS box, and make sure no symbol appears under code I sent.

If problem still appears, let me know, I will check carefully.

#2. It is fine to me