After an exciting day yesterday in @Himaladin 's thread (🎞️ How to Create an Auto-Play Slideshow), I was trying different custom collection image sizes for my larger screen displays.
The “full” layout was too huge (like a theatre screen) so I was looking for work arounds or a way to work with the 3:1 container size despite the right-skew.
As though in tune with the divine, a few moments ago Glide suddenly prompted an update and now the “full” custom collection image is the perfect size for me on the PC browser!!
I hope it doesn’t disrupt anyone else. (and hopefully this isn’t a bug 
)
#grateful
*Is it that the aspect ratio of cards changed in general? I like it tho.
I’m starting to think that the update only triggered a couple coincidences which led me to the right aspect ratios. 
3 Likes
Do you already know that I updated the new CSS code last night?
Your logo image seems to be using a background on the container, right?
yes, I’m using your new code for the mobile view. I works well so I’ll be using that for screen width less than 500px. I placed my logo on top instead of to the side.
What you’re seeing in the other image is what I’m testing for the large screen view (screen width greater than 500px). I was testing this code: CSS Library
I’m glad to hear that you’re enjoying your slideshow.
1 Like
Thanks for creating the solution!!
1 Like
Your last code is responsive in two states, so you may not need to make any special conditions.
I found that the full container layout looked better on the bigger screen than the 1:1 layout.
What do you think?
Yes, that’s better. Please explore. If there are any parts not covered in my code, let me know to fix it. But not this morning, as I will be heading to work. 
1 Like
I tweaked the code I liked best to close some small gaps and bathe the container in the color I wanted:
/*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;
}
I also edited @abdo 's and merged it with your original workflow to create text overlays on the clickable slide-show, using a custom collection with rich text only.
<div style="
position: relative;
width: 100%;
padding-top: 62%;">
<img src="Pictures to Show"
style="
position: absolute;
top: 0%;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
margin-top: 0px;
">
<div style="
border: 3px transparent;
position: absolute;
top: 10px;
left: 10px;
background-color: none;
color: white;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
padding: 5px 10px;
border-radius: 10px;
display: inline-block; width: 70%;
font-weight: bold;
font-size: 18px;">Name1
</div>
<div style="
border: 3px transparent;
position: absolute;
top: 10px;
right: 10px;
background-color: none;
color: white;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
padding: 5px 10px;
border-radius: 10px;
text-align: right;
display: inline-block; width: 30%;
font-weight: bold;
font-size: 18px;">Town</div>
<div style="
border: 3px transparent;
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background-color: none;
color: white;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
display: inline-block; width: 75%;
padding: 5px 10px;
border-radius: 10px;
text-align: center;
font-weight: bold;
font-size: 20px;">
Specialty
</div>
</div>
I wanted to show you a video of it but didn’t know how to embed it here.
(this is the link: Glide Jams by HIPT&T.mp4 - Google Drive)
What I would like help with now, is increasing the speed of the slide show and filling the height of the custom container that holds the rich text only.
@Sekayi_Liburd, unfortunately the speed of the slideshow is tied to the update time in Glide. If we speed it up, the sequence numbers jump. Perhaps @Jeff_Hager can provide some ideas.
You can use the value from this column to overlay:
ok. I was trying to manipulate the speed and also noticed that the sequence numbers jumped.
Did you look at the video link I sent?
- I sped up the slide show x4 in the video else it would have taken too long to demonstrate, lol.
Now you need CSS for an overlay, right? Let me try it first.
1 Like
I wonder if the glide update time is also the source of this person’s problem: Need to refresh the app so my changes take place
The issue with the update time also occurs in the case of creating a countdown timer, where I have not seen a solution for the calculation to run second by second.
1 Like
that’s an unfortunate limitation…
Please try this css:
#main-root:has(.slide-Show) [data-testid="cc-card"] > div > div:last-child {
position: absolute;
width: 100%;
height:100%;
flex-direction: row;
}
#main-root:has(.slide-Show) .image-style-rectilinear.grid > p:nth-child(1) {
padding: 4px 8px;
text-transform: capitalize;
font-size: var(--text-size-base,1rem);
color: var(--gv-text-contextual-pale);
}
#main-root:has(.slide-Show) .image-style-rectilinear.grid > h3 {
position: absolute;
display: flex;
padding: 6px 10px;
right:0;
top: 0;
font-size: var(--text-size-base,1rem);
}
#main-root:has(.slide-Show) .image-style-rectilinear.grid > p:nth-child(3) {
position: absolute;
width: calc(100% - 8px);
display: flex;
justify-content: center;
bottom: 0;
padding: 4px 8px;
text-align: center;
font-size: var(--text-size-base,1rem);
}
1 Like
paste this directly onto the container?
I guess in the appearance section.
1 Like
You can use the included fade-in to work around this condition.
