# 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:** 5

<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, 7:36am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/81 "2024-05-14T07:36:45Z")

</div>

sorry, lol. I thought I broke Glide for sure. 🤣

Ok, I made a new container and re-entered the css. Looks like this:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/3/83f46e5ff03e85a4e0988fac9e451c91b1f67178.jpeg)

It’s lining up the way we expect now.  
Is there a way to increase the image size?

---

<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, 8:03am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/82 "2024-05-14T08:03:15Z")

</div>

```auto
#main-root:has(.slide-Show).gp-xl.gp-xl.gp-xl.gp-xl .threeColumns:not(.pages-component-renderer.threeColumns) {
    grid-template-columns: 2fr 4fr 2fr; 
}

```

---

<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, 8:05am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/83 "2024-05-14T08:05:14Z")

</div>

this is great

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/6/9644bc22228a5f3912ec91b61c4bb1ab6cfac955.jpeg)

@Himaladin the text overlay shows up on my other collections too. Can I just have them on the slide Show?

---

<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, 3:13pm UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/84 "2024-05-14T15:13:15Z")

</div>

Sekayi, change your settings as follows, and you will see how fast the updates are in Glide.

 ![Screenshot 2024-05-14 at 22.11.09](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/0/208316411003a175fd1fe5946b012b8f041a27ab.png)

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [May 14, 2024, 5:11pm UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/85 "2024-05-14T17:11:28Z")

</div>

Been trying to follow along, but not very closely. @Himaladin you tagged me for ideas on speeding up some javascript and @Sekayi_Liburd you sent me a private message regarding the same. I wasn’t sure if you were still looking for an answer from me or if you moved on to a different solution. Just wanted to double check before I try to see if I can find a 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 14, 2024, 5:17pm UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/86 "2024-05-14T17:17:27Z")

</div>

Still an unsolved problem Jeff.  
Do you have an idea?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [May 14, 2024, 8:42pm UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/87 "2024-05-14T20:42:16Z")

</div>

Ok. I have an idea. It’s similar to something I’ve done in the past for an unrelated project and had somewhat successful results.

Off the top of my head I’m thinking maybe something that involves two javascript columns.

- One that is triggered by the current time (so every 10 seconds it should run). All it would do is return a random value, such as a random number or GUID. However this javascript column would also include a 5 second sleep timer that will cause it to wait 5 seconds before it returns anything.
- When the return value changes, then it’s passed to a second javascript column as a trigger parameter. The second javascript column is the one that returns the counter number. In addition to the limit parameter and the current time parameter, it includes the random value from the first javascript column as a parameter.

The result should be that the final javascript runs every 5 seconds instead of 10.

* * *

So just to help me understand the javascript below, is the purpose to get unix time in milliseconds, divide by 10000 to effectively get a number that updates every 10 seconds, and then get the divisible remainder based on the limit?

Looks like on its own it only changes every 10 seconds, so I think I would change from 10000 to 5000 so it can change every 5 seconds.

```auto
let limit = p2;
let currentCounter = Math.floor((new Date().getTime() / 10000) % limit) + 1;

return currentCounter;

```

Unless someone else wants to take a crack at this, I’ll try it myself sometime tonight when I’m done with work.

(Writing this out, it almost seems feasible to create some sort of timer in glide that actually does update every second. It would probably require 10 columns at least, but seems like it could be possible.)

---

<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, 11:21pm UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/88 "2024-05-14T23:21:17Z")

</div>

Hi @Jeff_Hager , I would like it to change every 5 seconds. 10 seconds is very long for my use case.

---

<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, 11:23pm UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/89 "2024-05-14T23:23:10Z")

</div>

Is it possible to restrict the text overlays to only the header?

---

<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, 11:49pm UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/90 "2024-05-14T23:49:21Z")

</div>

> [@Sekayi\_Liburd](#):
>
> restrict the text overlays to only the header

Oh… sorry, I missed your question.  
You add the class name to the collection component again, for example: **slide-card**. Then change #main-root:has(.slide-Show) to **.slide-card**.  
“Only regarding text-related code, not all code. Some of the code I provide works in containers, so don’t get confused again.”

---

<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, 11:53pm UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/91 "2024-05-14T23:53:22Z")

</div>

ok, thanks so much!

---

<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 15, 2024, 12:06am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/92 "2024-05-15T00:06:59Z")

</div>

> [@Jeff\_Hager](#):
>
> Looks like on its own it only changes every 10 seconds, so I think I would change from 10000 to 5000 so it can change every 5 seconds.

I have tried this part before. Actually, the update time for Glide on the device I tested is around 7 seconds. When using the formula “currentCounter” divided by 10000, the counter number will count it stably. However, if it is changed to 5000, some numbers will be skipped in a few frames. Maybe using 7000 could work.

> [@Jeff\_Hager](#):
>
> Off the top of my head I’m thinking maybe something that involves two javascript columns.

The idea of using additional columns may be a solution-oriented and manipulative idea, but I cannot imagine how to do it, while waiting for your brilliant idea.

---

<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 15, 2024, 12:46am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/93 "2024-05-15T00:46:17Z")

</div>

I have another idea, which is to create an auto-slide carousel for the collection, which might move quickly. But I’m too lazy to delve into its CSS. 😅

---

<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 15, 2024, 12:55am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/94 "2024-05-15T00:55:33Z")

</div>

I wore you out this weekend. Sorry 🥲

---

<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 15, 2024, 12:57am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/95 "2024-05-15T00:57:47Z")

</div>

No problem. Through our discussion, I have materials for exploration. I will try it in my spare time.

---

<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 15, 2024, 1:27am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/96 "2024-05-15T01:27:52Z")

</div>

If you want to see how it’s working, you can view the app here: [https://hiptnt.glide.page](https://hiptnt.glide.page)  
I’m not sure why the edge to edge image layout isn’t happening on the mobile view of the published app but I won’t fuss about it, lol.

As a temporary workaround for the slow image change speed, I’m using gifs that combine 2 images and switches them at the 5-second mark. Just for the sake of viewer interest.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [May 15, 2024, 2:19am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/97 "2024-05-15T02:19:52Z")

</div>

OK, so here’s what I got.

There are two javascript columns:

1. The first one is the javascript column with the 5 second delay. It is triggered by the current time. It waits 5 seconds (actually 4.5 seconds so it can finish before the next cycle runs) and then returns a unix time as the “random” value that is passed into the second column.  
  
Current Time is pass as a parameter, but it is not used in the actual code. It is only there to be a trigger to force the javascript to run.  
  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/9/c9ca831cce21db9016bc96a63c64163c0eb2de34.png)

```auto
function resolveAfternSeconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(new Date().getTime());
    }, 4500);
  });
}

return await resolveAfternSeconds();

```

1. This is the second column with @Himaladin’s javascript. Currently I have 10000 changed to 5000. Otherwise the math would only allow the value to change every 10 seconds regardless of how often the javascript runs. This change seems to allow it to update every 5 seconds instead. @Himaladin I understand what you are saying about the possibility of it skipping numbers. I’m still trying to determine if that is the case or not (haven’t put a lot of thought into the math that is happening). Would you maybe have an example of a Limit value where this could possibly be the case?  
  
Limit is a parameter for obvious reasons. Current Time and the value from the previous javascript column are passed as parameters, but again, then are not used in the actual code. They are only there to be a trigger to force the javascript to run. Current Time changes every 10 seconds, and TriggerWithDelay also changes every 10 seconds, but with a 5 second offset.  
  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/2/32e89845fe4cc34c9b2aee72266e5cfb56ef4850.png)

```auto
let limit = p1;
let currentCounter = Math.floor((new Date().getTime() / 5000) % limit) + 1;

return currentCounter;

```

Give it a shot and see if it works. If not, let me know.

---

<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 15, 2024, 2:45am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/98 "2024-05-15T02:45:39Z")

</div>

That’s really great @Jeff_Hager, it’s much faster now, maybe I didn’t really understand your explanation (the translator is not very reliable). 🫣

What happens if we use more than 3 columns, is it possible for the counter to update every second?

What’s weird is if I change 5000 to 1000, then what happens is a countdown. I really hope you can make a countdown timer that issue has not been resolved yet.

---

<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 15, 2024, 3:29am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/99 "2024-05-15T03:29:11Z")

</div>

genius! you guys are so good!  
Works like a charm @Jeff_Hager @Himaladin 🎉 🎉

---

<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 15, 2024, 3:33am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/100 "2024-05-15T03:33:37Z")

</div>

Have you tried it yet? The result is twice as fast.

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

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