what fade in? Do we have a fade in?
I have included it in my previous thread, including the responsive CSS code as well. The code you are using is the previous code.
/*Fade-in code*/
.slideShow:has(img) > div {
animation: fade 2.5s alternate;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
oh. Can I just paste this one in? I like the code that I’m using, lol.
Yes, you can try. This is the fade-in I tested when it’s not used as a header. It might be problematic if used in the header.
It didn’t make any change to the images.
what container/collection settings did you use to achieve this display? Is it the same configuration you showed in the other thread? 1:1?
3 column.
My last code, I tried to remove layout class boundaries. Maybe it’s still not perfect.
oh ok, I’m going to test the 3 column since you made it look so good. Are you ok with the code I chose? (below)
/*Container padding*/
.mobile-layer .slide-Show > div > div > div > div {
padding:0 !important;
width: 100%;
margin-top:-17px;
}
/*Can delete*/
.mobile-layer .slide-Show {
background: transparent !important;
padding:0;
}
.mobile-layer .slide-Show [data-testid="card-image"]{
height:300px;
}
.slide-Show [data-testid="card-image"] img{
border-radius:0;
}```You can save everything. If the following is more suitable when you place your slideshow at the top as a header.
/*Hide Navbar*/
#page-root:has(.slide-Show):has([class*="mobile-nav-bar"]) [data-testid="wire-container"] {
background-color: transparent !important;
padding-top: 0;
}
/*Container padding*/
#page-root:has(.slide-Show):has([class*="mobile-nav-bar"]) .slide-Show > div > div > div > div {
padding:0 !important;
width: 100%;
//margin-top: calc(30px - var(--safe-area-inset-top));
}
/*Hide Container background*/
.mobile-layer #main-root:has(.slide-Show) .slide-Show {
background: transparent !important;
}
.mobile-layer #main-root:has(.slide-Show) [data-testid="card-image"]{
height:300px;
}
.mobile-layer #main-root:has(.slide-Show) [data-testid="wire-component-stack-slide-Show"] > div > div > div, .mobile-layer #main-root:has(.slide-Show) [data-testid="card-image"] > div, .mobile-layer #main-root:has(.slide-Show) [data-testid="card-image"] img, #page-root:has(.slide-Show) [data-testid="cc-card"]{
border-radius:0;
padding:0px;
}
This part can be removed: //margin-top: calc(30px - var(–safe-area-inset-top));
when I use this one I get a gap between the 2 columns, which is why I like the other one better.
In my opinion, your logo should use a PNG file. As for the background color, you should apply it to the container. I can remove your gap, but in some cases, everything will feel tightly packed without spacing.
Just add this if you want:
#main-root:has(.slide-Show) [data-testid="wire-container"] {
margin-top:0;
}
My logo is png
oohh, I see. I’ll try it!
I always refer to CSS as “she”. Without her, the digital world wouldn’t be beautiful, but if there’s too much of her, she can make you dizzy. 
lol, yes. I love it! This is the first time I’m using CSS and I think I’m starting to understand a little bit about it (emphasis is on the “little bit”). lol.
Now I know why coders code… It’s thrilling to create something out of nothing!
Still the same. Try various settings in the Glide panel.
Same as this?
It depends on which layout you choose. If you use 1:1 or the last one is 3 columns.