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

<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/21 "2024-05-14T02:44:58Z")

</div>

what fade in? Do we have a fade in?

---

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

</div>

I have included it in my previous thread, including the responsive CSS code as well. The code you are using is the previous code.

```auto
/*Fade-in code*/
.slideShow:has(img) > div {
  animation: fade 2.5s alternate;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 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 14, 2024, 2:57am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/23 "2024-05-14T02:57:11Z")

</div>

oh. Can I just paste this one in? I like the code that I’m using, 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, 2:59am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/24 "2024-05-14T02:59:36Z")

</div>

Yes, you can try. This is the fade-in I tested when it’s not used as a header. It might be problematic if used in the header.

---

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

</div>

It didn’t make any change to the images.

---

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

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/c/2c52686283d6d4c78b61dd9aa7f90ff1c504548f.jpeg)

what container/collection settings did you use to achieve this display? Is it the same configuration you showed in the other thread? 1:1?

---

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

</div>

3 column.  
My last code, I tried to remove layout class boundaries. Maybe it’s still not perfect.

---

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

</div>

oh ok, I’m going to test the 3 column since you made it look so good. Are you ok with the code I chose? (below)

````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;
}```
````

---

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

</div>

You can save everything. If the following is more suitable when you place your slideshow at the top as a header.

```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;
}

```

This part can be removed: //margin-top: calc(30px - var(–safe-area-inset-top));

---

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

</div>

when I use this one I get a gap between the 2 columns, which is why I like the other one better.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/2/2294a24fe912fcb6f62ef3839078d3b7f7b1e759.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, 3:46am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/31 "2024-05-14T03:46:55Z")

</div>

In my opinion, your logo should use a PNG file. As for the background color, you should apply it to the container. I can remove your gap, but in some cases, everything will feel tightly packed without spacing.

Just add this if you want:

```auto
#main-root:has(.slide-Show) [data-testid="wire-container"] {
margin-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, 3:51am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/32 "2024-05-14T03:51:10Z")

</div>

My logo is 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, 3:53am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/33 "2024-05-14T03:53:03Z")

</div>

I mean without a background. Just the graphic itself. You can remove the red color, or you can add a red background to the container to eliminate the different color gap.

With gap:

 ![Screenshot 2024-05-14 at 10.54.36](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/f/7f44ce7fb14aaacb885e99ffdf7183c4c82a90a5.jpeg)

Without gap:

 ![Screenshot 2024-05-14 at 10.54.19](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/2/62054f92b5b69b60000bde5b86dfb1e636d2e03a.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, 3:57am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/34 "2024-05-14T03:57:06Z")

</div>

oohh, I see. I’ll try 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, 4:03am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/35 "2024-05-14T04:03:59Z")

</div>

I always refer to CSS as “she”. Without her, the digital world wouldn’t be beautiful, 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, 4:10am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/36 "2024-05-14T04:10:36Z")

</div>

lol, yes. I love it! This is the first time I’m using CSS and I think I’m starting to understand a little bit about it (emphasis is on the “little bit”). lol.  
Now I know why coders code… It’s thrilling to create something out of nothing!

---

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

</div>

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.

\*Edit:  
but on the large view, my picture remains small. How is yours nice and big? Are you using a custom collection?

---

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

</div>

Still the same. Try various settings in the Glide panel.

---

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

</div>

Same as this?

> [@🎞️ How to Create an Auto-Play Slideshow](https://community.glideapps.com/t/how-to-create-an-auto-play-slideshow/73271/64):
>
> ![Screenshot 2024-05-12 at 13.15.38](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/c/0c62ae9f7c3631203c57fcfde25cbcc748fa98b7.jpeg)
> 
> Screenshot 2024-05-12 at 13.15.381920×985 105 KB

---

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

</div>

It depends on which layout you choose. If you use 1:1 or the last one is 3 columns.

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

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