# CSS for Responsive Header

**URL:** <https://community.glideapps.com/t/css-for-responsive-header/73303>\
**Category:** Ask for Help\
**Created:** [May 12, 2024, 11:12pm UTC](https://community.glideapps.com/t/css-for-responsive-header/73303 "2024-05-12T23:12:54Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 12, 2024, 11:12pm UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/1 "2024-05-12T23:12:54Z")

</div>

After an exciting day yesterday in @Himaladin 's thread ([🎞️ How to Create an Auto-Play Slideshow](https://community.glideapps.com/t/how-to-create-an-auto-play-slideshow/73271)), 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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/5/051eb31dcb8e4324909cbaba107e575a8a408186.jpeg)

~~\*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. 👀

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 12, 2024, 11:52pm UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/2 "2024-05-12T23:52:49Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 12, 2024, 11:57pm UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/3 "2024-05-12T23:57:11Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/4/f464726c3d72a59c00bcb9feb46ebe9cb87e9c2f.jpeg)

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](https://css-library.glide.page/dl/library/s/8836b3/r/GHM034BgTKeJWwpELWjB.w)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 13, 2024, 12:02am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/4 "2024-05-13T00:02:41Z")

</div>

I’m glad to hear that you’re enjoying your slideshow.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 13, 2024, 12:04am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/5 "2024-05-13T00:04:08Z")

</div>

Thanks for creating the solution!!

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 13, 2024, 12:07am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/6 "2024-05-13T00:07:05Z")

</div>

Your last code is responsive in two states, so you may not need to make any special conditions.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 13, 2024, 12:10am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/7 "2024-05-13T00:10:34Z")

</div>

I found that the full container layout looked better on the bigger screen than the 1:1 layout.  
What do you think?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/0/100fa8ecd74232d303cd1b5381ac0b7eb21d80ec.jpeg)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 13, 2024, 12:13am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/8 "2024-05-13T00:13:55Z")

</div>

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. 😉

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 13, 2024, 12:17am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/9 "2024-05-13T00:17:18Z")

</div>

Ok. Thanks 🤗

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 13, 2024, 7:18am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/10 "2024-05-13T07:18:16Z")

</div>

I tweaked the code I liked best to close some small gaps and bathe the container in the color I wanted:

```auto
/*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.

```auto
<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](https://drive.google.com/file/d/1Xv2leSKbNG-DwrYO4qa3p3PDKibS9s3I/view?usp=drive_link))

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.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 14, 2024, 12:47am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/11 "2024-05-14T00:47:23Z")

</div>

@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.

> [@Sekayi\_Liburd](#):
>
> is increasing the speed of the slide show

> [@Sekayi\_Liburd](#):
>
> to create text overlays on the clickable slide-show

You can use the value from this column to overlay:

 ![Screenshot 2024-05-14 at 07.43.31](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/4/14fc1cd4154aca270665c53cf43f1c58ad51ba21.png)

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 14, 2024, 12:53am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/12 "2024-05-14T00:53:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 14, 2024, 12:56am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/13 "2024-05-14T00:56:00Z")

</div>

Now you need CSS for an overlay, right? Let me try it first.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 14, 2024, 1:09am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/14 "2024-05-14T01:09:28Z")

</div>

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](https://community.glideapps.com/t/need-to-refresh-the-app-so-my-changes-take-place/73333)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 14, 2024, 1:14am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/15 "2024-05-14T01:14:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 14, 2024, 1:20am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/16 "2024-05-14T01:20:31Z")

</div>

that’s an unfortunate limitation…

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 14, 2024, 2:35am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/17 "2024-05-14T02:35:00Z")

</div>

Please try this css:

```auto
#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);
}

```

 ![Screenshot 2024-05-14 at 09.41.50](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/0/10eb34926b7050f5b67fc113fa7c8efd2b52773e.jpeg)

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 14, 2024, 2:38am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/18 "2024-05-14T02:38:10Z")

</div>

~~paste this directly onto the container?~~

I guess in the appearance section.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 14, 2024, 2:44am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/19 "2024-05-14T02:44:05Z")

</div>

> [@Sekayi\_Liburd](#):
>
> that’s an unfortunate limitation…

You can use the included fade-in to work around this condition.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 14, 2024, 2:44am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/20 "2024-05-14T02:44:15Z")

</div>

wonderful!

[Next page](https://community.glideapps.com/t/css-for-responsive-header/73303.md?page=2)