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

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

</div>

so strange. Mine is small no matter what I do… Only in the custom collection it gets bigger.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/1/9164de42437aad5fb36370a1774f079ffeddc56e.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, 4:54am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/42 "2024-05-14T04:54:26Z")

</div>

What components and configurations are you using?

---

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

</div>

I think I lost some of the code. Can you send it again?

---

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

</div>

This is not a matter of code, but rather the components being used.

---

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

</div>

ok but I deleted all of the code and nothing appeared to change 🥲

These are my components. They are at the top.  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/e/ee7305c5b00d7533a398b9c0ae084c66e1398a2c.png)

---

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

</div>

3 kolom? The code above should work. What seems to be the problem on your end?

> [@Himaladin](#):
>
> ```auto
> /*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;
> }
> 
> ```

---

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

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/7/f7cee878f59228828524a5a8399dd04bf3953afe.png)

I’m not sure what the problem is. I’m searching for it.

---

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

</div>

> [@Himaladin](#):
>
> but if there’s too much of her, she can make you dizzy.

🤣

---

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

</div>

Ok. I think there’s a bug. Before I copied your code, I went over to another app and then returned to see it like this:

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

It wouldn’t align like that before.

It’s still small though… then I replaced my code with yours and it’s still small.

Full screen looks like this:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/a/3af3a811f04e1ad64a3a6078c977f188b8de682d.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, 5:25am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/50 "2024-05-14T05:25:00Z")

</div>

If you use a component for the logo, then the limit you can achieve is this. However, if you use an container’s image as a background, you can exceed it, but it won’t appear on mobile.

 ![3af3a811f04e1ad64a3a6078c977f188b8de682d_2_1380x552](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/b/bbc613ccd86f13c66afc5ba89f145a1c6723d606.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, 5:28am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/51 "2024-05-14T05:28:11Z")

</div>

Ok. I’ll try 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, 5:33am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/52 "2024-05-14T05:33:24Z")

</div>

I closed the page and opened it again and it’s back to this: 🙄

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

And I didn’t change anything yet.

I probably played around too much and broke the system 🫤

---

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

</div>

> [@Sekayi\_Liburd](#):
>
> These are my components. They are at the top.  
> ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/e/ee7305c5b00d7533a398b9c0ae084c66e1398a2c.png)

Are you sure?

> [@Sekayi\_Liburd](#):
>
> ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/7/f7cee878f59228828524a5a8399dd04bf3953afe.png)
> 
> image330×512 13.6 KB

---

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

</div>

when I reopened the page, the components moved … I didn’t move them.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/b/5b455bcb41804f4dd55e39ad2d6a1fc7c160c7af.png)

@NoCodeAndy Has this happened before?

---

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

</div>

This happens when you’re trying to do a layout. This is normal.

---

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

</div>

why does it happen?

or I should ask… Is it supposed to happen?

---

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

</div>

The system cannot redistribute your component back to another column, except undo.

---

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

</div>

Since I had closed the page, undo doesn’t get me very far:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/f/8f89b5819d60c3a8aa0615f5c6b0098a34b097d3.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, 5:55am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/59 "2024-05-14T05:55:47Z")

</div>

Is your screen wide enough? Do a crosscheck in CSS as well.

---

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

</div>

my screen is 1920 (according to Glide device info). I deleted all the css and just copied the last one you gave me.

I’'ll try reverting to my original css from earlier today.

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

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