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.
1 Like
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
I mean without a background. Just the graphic itself. You can remove the red color, or you can add a red background to the container to eliminate the different color gap.
With gap:
Without gap:
1 Like
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. 
1 Like
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!
1 Like
ok, i changed the graphic and it works without the adjustment now 
I’m keeping the nav bar visible by the way.
*Edit:
but on the large view, my picture remains small. How is yours nice and big? Are you using a custom collection?
1 Like
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.