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

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

</div>

Try to switch to maximum view and …

![Screenshot 2024-05-14 at 13.02.32](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/3/23d7e1a5460e5c40b9787a581fb53e64d3eea6d2.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, 6:05am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/62 "2024-05-14T06:05:12Z")

</div>

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

Do you think my screen might be an unusual length?

---

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

</div>

Glide used to be able to go full screen within my window but it’s not doing it at the moment.

---

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

</div>

Maybe you are using too much memory. Try closing it and opening it 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, 6:29am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/65 "2024-05-14T06:29:07Z")

</div>

It’s opening to the full width after restarting the computer

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/1/d1118de5bca00171938b4e060fc7af702f943a9d.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 14, 2024, 6:32am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/66 "2024-05-14T06:32:47Z")

</div>

Where is your logo? Did you change the settings?

---

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

</div>

I deleted it to see if anything would change.

Now I see this message:  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/5/d5d6f5e518e6573df4327a2738377135e69e6ef3.png)

This was the only code I had in there:

```auto
/*Container padding*/
#page-root:has(.slide-Show) .slide-Show > div > div > div > div {
padding:0 !important;
width: 100%;
margin-top:-20px;
}
/*Can delete*/
#page-root:has(.slide-Show) .slide-Show {
background: color !important;
padding:0;
}
#page-root:has(.slide-Show) [data-testid="card-image"]{
height:300px;
}
#page-root:has(.slide-Show) [data-testid="card-image"] img{
border-radius:0;

#main-root:has(.slide-Show) [data-testid="cc-card"] > div > div:last-child {
    position: absolute;
    width: calc(100% - 4px);
    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;
    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: 100%; 
    display: flex;
    justify-content: center;
    bottom: 0;
    padding: 4px 8px;
    text-align: center;
    font-size: var(--text-size-base,1rem);
}

```

---

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

</div>

Turn it off

---

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

</div>

ok but should I try to validate the CSS?

---

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

</div>

No, it’s because it contains :has, a pseudo code that is still in staging.

> [@Sekayi\_Liburd](#):
>
> This was the only code I had in there:

This is not the last one I provided. The last one, I have already given above (contain /\*Hide Navbar\*/)

---

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

</div>

sorry, I already tried to validate it. It says using root is unstable

---

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

</div>

I’ll delete the codes and leave the page for 5 minutes to update. Then I’ll test it with the codes without “root”, just in case that’s the reason why everything got buggy.

---

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

</div>

remember I said I don’t want to hide the nav bar. I doesn’t look good without the bar.

---

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

</div>

> [@Sekayi\_Liburd](#):
>
> ok, i changed the graphic and it works without the adjustment now 🙂
> 
> ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/f/bfb8e195403f6a6e87afb1275843bb719ae0c1bb.jpeg)
> 
> I’m keeping the nav bar visible by the way.

from back here.

Do you think this is the source of the problem?

---

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

</div>

Just remove this part:

```auto
/*Hide Navbar*/
#page-root:has(.slide-Show):has([class*="mobile-nav-bar"]) [data-testid="wire-container"] {
background-color: transparent !important;
padding-top: 0;
}

```

---

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

</div>

yes, that’s what I did 🙂

---

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

</div>

Ok. So after deleting the codes and waiting a while… during which time I also cleared cached, temporary files and cookies from my pc, and upped the monitor zoom by 10%…

I opened the app and now it looks like this:

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

I really think it could be a bug in the system. So maybe I should delete this app and use another on to test the layouts. What do you think?

~~Look at this @Himaladin @NoCodeAndy~~

~~Isn’t that weird?~~

---

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

</div>

What is the problem? I don’t see the oddity? You can replace it with a new container to test it.

---

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

</div>

I thought it was weird that the image flashed big every time I changed back to the layout view… Guess I’m just panicking now, 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, 7:35am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/80 "2024-05-14T07:35:35Z")

</div>

Now, NoCodeAndy is freaking out. 😅

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

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