# CSS for Responsive Header **URL:** \ **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:** 7
**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 16, 2024, 11:45pm UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/121 "2024-05-16T23:45:19Z")
What’s the configuration like? ---
**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 17, 2024, 12:09am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/122 "2024-05-17T00:09:28Z")
I configured it the same way as the first collection. It looks good. It works on the pc and on the PC’s installed app but this collection’s images don’t appear on the phones at all… only the first collection images can appear on the phones. This is the collection settings: ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/f/7f83940aca06bf598c0d00799be7c1a6c306811b.png) I also tried putting the second collection in another container and create a new custom class but the result was the same. It works perfectly on the wide screens for both collections but only the first group of auto images appear on the phones. The 2nd collection doesn’t appear. ---
**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 17, 2024, 12:24am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/123 "2024-05-17T00:24:34Z")
I’ll continue tonight, okay? I mean your component arrangement in the left panel is related to this. ---
**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 17, 2024, 12:29am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/124 "2024-05-17T00:29:28Z")
> [@Himaladin](#): > > I’ll continue tonight, okay? ok. No problem > [@Himaladin](#): > > I mean your component arrangement in the left panel is related to this. It’s like this on the left: ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/f/cfaf823d848fd5fd0b1ed1150e59c0af8c724618.png) the green arrows show where I had inserted the 2nd collection and rich text. ---
**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 17, 2024, 12:41am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/125 "2024-05-17T00:41:24Z")
Is it because your richtext component is located in the middle column so it covers it? ---
**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 17, 2024, 1:21am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/126 "2024-05-17T01:21:04Z")
I tested that. It doesn’t seem to be the problem… Let me tell you what I tried and the results. I’ll refer to them as “A” and “B”. 1. We successfully setup Collection A with the slide show and it ran perfectly 2. I created Collection B in the same fashion as Collection A 3. After seeing that it worked in the editor, I moved it into the container with Collection A and placed Collection B just below Collection A and made visibility switches to easily select which collection should show 4. These all worked perfectly on the editor and on launching the app on the PC 5. Open my mobile phone but Collection B images never appear. 6. Tried creating a variation of the code with custom class .Bslide-Show for CollectionB but it made no difference. 7. Tried placing Collection B in it’s own container. No change in results. 8. Tried testing without the Responsive header css. No change. Here is the clincher… Both of my cell phones couldn’t see Collection B images but then I asked my husband to check his phone and both Collection A and Collection B images are loading perfectly on his phone. 1. I tried restarting my 2 cellphones but nothing changed for me. This is a strange issue… Device compatibility? ---
**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 17, 2024, 7:34am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/127 "2024-05-17T07:34:48Z")
Berikut terjemahannya: I will try whatever comes to mind or seems obvious first… 1. Are you sure the images in your Collection are not an array, because I see that it is a lookup column. 2. Why is the component you are using an image, or do you have an array column? 3. The part that is difficult and I am not entirely sure about is your statement that the slide-show appears on your husband’s phone but not on yours. Is this just a delay issue, or something else like a role or another factor? I am having difficulty testing it unless you lend me your phone. 😀 ---
**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 17, 2024, 7:47am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/128 "2024-05-17T07:47:07Z")
> [@Himaladin](#): > > Are you sure the images in your Collection are not an array, because I see that it is a lookup column My image table for the slide show of Collection B is linked to my Business table. I formed a relation and then looked up the images from the business table. On the other hand, my image table for Collection A is linked to my Activity table. > [@Himaladin](#): > > Why is the component you are using an image, or do you have an array column? This image was the stop-gap for the 5 second delay. It’s not directly related to the collection… It disappears when the JavaScript finishes initializing and gives its first values. > [@Himaladin](#): > > The part that is difficult and I am not entirely sure about is your statement that the slide-show appears on your husband’s phone but not on yours. Is this just a delay issue, or something else like a role or another factor? There are no problems at all on my husband’s phone. Everything works. Both collections are perfect for him - the slide show is a total success. But my 2 phones cannot load the images from the 2nd collection. It is very mysterious. ---
**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 17, 2024, 7:55am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/129 "2024-05-17T07:55:55Z")
The important thing is that you make sure your lookup column is not an array. I can’t help much. Sometimes this can happen because of your device’s memory. Maybe you need to test with another device besides yours and your husband’s. ---
**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 17, 2024, 8:00am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/130 "2024-05-17T08:00:02Z")
what is the best way to pull the images from the other table and be sure it’s not an array? Single value column? ---
**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 17, 2024, 8:01am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/131 "2024-05-17T08:01:52Z")
Query + Lookup or relation + lookup. Actually, if you use collections you can make everything independent. ---
**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 17, 2024, 8:03am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/132 "2024-05-17T08:03:46Z")
![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/3/a3cea321741decb627228480b25889ce50d89d5f.png) What does the second lookup do? ---
**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 17, 2024, 8:04am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/133 "2024-05-17T08:04:55Z")
![Screenshot 2024-05-17 at 15.04.34](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/b/cbff3238129ac26dbd6e79d3a052313ca08e09b5.png) ---
**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 17, 2024, 8:09am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/134 "2024-05-17T08:09:10Z")
ok. Take a look. It’s not an array, right? ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/c/dcc7e7e6bf938624e13796531321a693d8de7cb2.jpeg) Because when I use query, I only see the entire table. I can’t select the images. ---
**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 17, 2024, 8:32am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/135 "2024-05-17T08:32:31Z")
Queries are actually almost the same as relations. Here you can do filters. For example, in the query dialog, select table B, then filter: email is this row email ---
**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 17, 2024, 8:49am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/136 "2024-05-17T08:49:11Z")
ok. I used query for Index to Show. For whatever reason, the lookup gave me 1 picture per row. I used it like this: Create Relation (single) \> lookup desired picture column from relation column ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/4/5480fca815275cab6db9f62fbb7b4d2ea9ab30b3.jpeg) And the same for the next ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/5/85be45e6cc885d73a893b29e8a11963cdb53f086.jpeg) ---
**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 17, 2024, 8:51am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/137 "2024-05-17T08:51:59Z")
This should work if you display it with collection + filter against your look up column. ---
**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 17, 2024, 8:53am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/138 "2024-05-17T08:53:43Z")
ok nice. That’s what I did 🙂 ---
**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 17, 2024, 8:56am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/139 "2024-05-17T08:56:25Z")
What happens if you discard the collection A and only display collection B on your cellphone? ---
**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 17, 2024, 8:59am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/140 "2024-05-17T08:59:48Z")
you mean like deleting it altogether? 🫥 I guess I can try it, lol [Previous page](https://community.glideapps.com/t/css-for-responsive-header/73303.md?page=6) [Next page](https://community.glideapps.com/t/css-for-responsive-header/73303.md?page=8)