# CSS fixed position for right panel?

**URL:** <https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054>\
**Category:** Ask for Help\
**Created:** [May 21, 2021, 9:20am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054 "2021-05-21T09:20:05Z")\
**Posts on this page:** 20\
**Page:** 4

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [May 21, 2021, 8:58pm UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/61 "2021-05-21T20:58:41Z")

</div>

No problem, man…I found it

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 21, 2021, 9:00pm UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/62 "2021-05-21T21:00:53Z")

</div>

This need to be a different approach, right now we found semi solution, but the best way would be, to target the right panel.

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [May 21, 2021, 10:13pm UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/64 "2021-05-21T22:13:27Z")

</div>

I’m not sure if it’s this, but is that what you want?

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

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 21, 2021, 10:22pm UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/65 "2021-05-21T22:22:46Z")

</div>

no, we already get better results… it have to be only above right panel

```
<img class="back_image" src="IMAGE">
    <pre><span><style>
    .back_image{
position:fixed;
width:120%;
max-width:705px;
height:calc(16.7% + 1px);
margin-left:3px;
-ms-transform: translate(-8%, -90%);
transform: translate(-2%, -90%);
z-index:1;
    }
    .jiuuwu svg {
    display: none;
    }
    [data-test="glide-app-bar"]
    {display: none}
```

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 21, 2021, 10:25pm UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/66 "2021-05-21T22:25:56Z")

</div>

your line goes across whole screen, i need this look…

 ![Screen Shot 2021-05-21 at 6.30.32 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/7/276e9fac894ab21ab55aa007043e2aa506d8cba0.jpeg)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 21, 2021, 10:36pm UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/67 "2021-05-21T22:36:32Z")

</div>

can you add inline list, so it will split screen in two panels? and than you see how it looks like?

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [May 21, 2021, 10:38pm UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/68 "2021-05-21T22:38:17Z")

</div>

Glide recognize it as one thing

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

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 21, 2021, 10:39pm UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/69 "2021-05-21T22:39:26Z")

</div>

yes, thats my problem… we are trying to target specific panel

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 21, 2021, 11:13pm UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/70 "2021-05-21T23:13:55Z")

</div>

this is a working sample what i’m doing… please don’t laugh… is just a structure for now, it will be good in few days  
you can switch there to tablet view to see how it looks like… in mobile view, everything looks good then you switch to tablet… and this is when i need help… we were able to cheat a little so is acceptable … (check by clicking book floating button in tablet mode)

> **[Holy Bible](https://holy-bible.glideapp.io/)**

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 22, 2021, 12:54am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/71 "2021-05-22T00:54:04Z")

</div>

Just to know.  
What was robert’s idea for .left .right?

> [@Uzo](#):
>
> Targeting left and right panel… @Robert_Petitto was trying that before for inline list using .left .right targetting, but i can’t make it work for fixed images.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 22, 2021, 1:45am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/72 "2021-05-22T01:45:42Z")

</div>

That what he come up with list view…

`<pre><span><style> .left-panel .card-title { font-size: .4rem !important; } .right-panel .card-title { font-size: 2rem !important; }`

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 22, 2021, 1:49am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/73 "2021-05-22T01:49:40Z")

</div>

I hope @hisashi.fujita will take a look at this… he have a unique solutions.  
Nobody really take a chance on tablets css… and most of my customers use desktops to work with my Apps… and Glide is not really working on desktop experience ☹

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [May 22, 2021, 2:14am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/74 "2021-05-22T02:14:49Z")

</div>

@Uzo , thank you for calling.  
I checked your app in tablet / PC mode.  
What kind of design is your goal?

 ![スクリーンショット 2021-05-22 11.09.52](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/d/1dc1fad3b564105cdb277739ff27df638260582a.png)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 22, 2021, 2:16am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/75 "2021-05-22T02:16:46Z")

</div>

Check this conversation, you will know what is the problem, trying to adjust images, boxes… to the with and positions of right panel in desktop view… but at the same time not ruin mobile view, and they have to be in fixed position, click the second floating button with the book icon… there is sample we already fixed… but still is not a perfect solution, it requires photoshop fixing

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [May 22, 2021, 3:32am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/76 "2021-05-22T03:32:18Z")

</div>

Are you aiming to place the “book gif” in the upper right corner?  
And would you please present your CSS for this gif image?

 ![スクリーンショット 2021-05-22 12.26.53](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/2/c2a13609545680a00759c2b844f2b2f55cdde2b2.jpeg)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 22, 2021, 3:59am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/77 "2021-05-22T03:59:42Z")

</div>

No, just like in the first screen when you click book button, center of the right panel, fixed, on top

![a9335aee165cc744ebe6d01e249d53ce1e5b3573_2_690x454](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/6/664bd060572fa2ceef31a619855fbe0fbed6570d.png)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 22, 2021, 4:04am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/78 "2021-05-22T04:04:53Z")

</div>

If you can find how to relate size of image to a size of right panel, that will also work on mobile view

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [May 22, 2021, 11:09am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/79 "2021-05-22T11:09:32Z")

</div>

Is it like this?

 ![スクリーンショット 2021-05-22 20.07.26](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/c/fc2a6a88b41fcfbf701215f969c7ff0299c01560.png)

 ![スクリーンショット 2021-05-22 20.07.54](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/7/f72e4a5651494afa8b002d03bd0c8b59227490a3.png)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 22, 2021, 11:26am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/80 "2021-05-22T11:26:15Z")

</div>

no… the whole right panel…

 ![Screen Shot 2021-05-22 at 7.25.36 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/2/d2c2860e2e3b7c5ff4eae290035d7759d1f4c492.jpeg).

 ![Screen Shot 2021-05-22 at 7.27.27 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/0/e08558a426faa2255b176c1d49e5449a11a20421.jpeg)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 22, 2021, 2:20pm UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/81 "2021-05-22T14:20:37Z")

</div>

after 1 day of fighting with CSS settings, finally got what i want… here is the finished version (you can check mobile… than switch to tablet, both modes looks good!) :

> **[Holy Bible](https://holy-bible.glideapp.io/)**

thank you guys for helping… specially @Manu.n , your version was the closest one to the perfection!

[Previous page](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054.md?page=3)

[Next page](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054.md?page=5)