CSS fixed position for right panel?

how it looks like on mobile?

well we have to make some adjustments

without changing anything? mobile and tablet? same settings?

CSS for test

<img class="back_image" src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/qj1KRrXid5ysFqfjAVs2/pub/wGiwcfoBlNChe9kMB8VZ.gif">
<img class ="back"  src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/uPcxis2H9otF68X9jr7A/pub/L3CeN6WYOLe3f11zOXnH.png">

<pre><span><style>

.back{
position:fixed;
width:100%;
max-width:705px;
/height:calc(13.5% - 30px);
height:80px;
margin-left:37px;
-ms-transform: translate(-8%, -105%);
transform: translate(-8%, -105%);
z-index:0;
/object-fit: contain;
display:flex;

}

.back_image{
position:fixed;
/width:100%;
max-width:705px;
/height:calc(13.5% - 30px);
height:79px;
margin-left:37px;
-ms-transform: translate(-8%, -105%);
transform: translate(-8%, -106.7%);
z-index:1;
/object-fit: contain;
display:flex;
    }


    .jiuuwu svg {
    display: none;
    }
    [data-test="glide-app-bar"]
    {display: none}

the easiest would be to have the gif without the bottom line.
It’s easier to adjust

Screen Shot 2021-05-21 at 7.25.10 AM

still not good

ok cool, I look for

1 Like

forget about bar, just to make image full on both views…

got it… just gonna work on right stretch.


I hope someone will come up with relating size to active window solution…
thank you for helping me!
I owe you a drink! :wink:
for now, your code is good with same background color as App window… I check mobile, tablet and desktop… looks good, i can deal with it.

I didn’t give up :slight_smile:

It’s just long because I’m having trouble refreshing my application on the desktop, it fakes me at least 10 to 15 refreshes to see the rendering. which is not the same as the publisher.

1 Like

repeat the tests later (I have a meeting for my job)
But if a CSS pro goes through this with a solution, he is welcome.

1 Like

thank you again…!
ill wait with redoing whole App for a day… maybe someone will come up with better idea…
Target active window and disable scrolling for this element… i just can’t find the right one.

To test, at home it’s not bad.
Afterwards I have no more ideas.

<pre><span><style>

[data-test="nav-bar"] {
/* Line */
border-color:red !important;
border-bottom: outset #f33;
/* Img */
background: center / contain no-repeat url("https://global.discourse-cdn.com/business7/uploads/glideapps/original/3X/8/c/8cc5e4e2292fc254e99a1ac08e83962843c6442c.gif");
background-size: 350px;
/* Color Background */
background-color: white !important;
}

/* Menu */
[data-test="nav-button-menu"] {
display:none;
}

/* Tab Title */
.edGQJH {
display:none;
}


.jiuuwu svg {
display: none;
}
 

</style></span></pre>

image

1 Like

This is another improvement… thank you!
I’m little disappointed that nobody else jumped in to this problem…
The best solution would be precise size of the active window… that look good on mobile and tablet…

Also … how to place another image on top of the left panel, and not being visible on mobile (because it belongs to previous screen)?

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.
Maybe @Lucas_Pires could help? :wink:

Can you share the entire code with img url so I can test here?

I just tagged you in our conversation, there are codes that we were working on.

Roll back this conversation… you’ll find codes, I’m not at my computer now to try… using cellphone…