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.