CSS fixed position for right panel?

Ask for Help
1

Hi, anyone have a solution how to use fixed position for the right panel ?
I’m trying to put picture in fixed position on top… in mobile view everything is ok, but in a tablet/desktop it stretches for the whole screen. I need it to be only in right panel at the top, fixed.

2

Hi
It’s a hassle finally I have a hard time with that.
There are a few things (by dint of testing)

What is an image component? or a direct html?

3

If possible to see your CSS for the mobile version (to have a base)

4 
<div style="position: fixed; top:0px; left: 0%; z-index:1;" target="_blank">
<img class="back_image" src="IMAGE">
    <pre><span><style>
    .back_image{
    width: max(100%);
    }
    .jiuuwu svg {
    display: none;
    }
    [data-test="glide-app-bar"]
    {display: none}
5

Just a quick test.
I don’t know if this is the purpose of your research

image
image1099×772 96.5 KB

image
image929×877 66.3 KB

6

let me try…

7

I deleted the first line <div … target …>

8

i need that on top, where bar is, i have to take out top and bottom bar

9

transform

image
image1094×445 56.3 KB

10

that looks good… can you paste the code?

11

voilà

<img class="back_image" src="https://images.unsplash.com/photo-1519046904884-53103b34b206?ixid=MnwxMDEzNjV8MHwxfHNlYXJjaHwyfHxiZWFjaHxlbnwwfHx8fDE2MjA4MjMwODI&ixlib=rb-1.2.1">
    <pre><span><style>
    .back_image{
position:fixed;
width:10%;
left:calc(80% + 10px);
-ms-transform: translate(0%, -150%);
transform: translate(0%, -150%);
    }
    .jiuuwu svg {
    display: none;
    }
    [data-test="glide-app-bar"]
    {display: none}
12

is not working good, tablet and mobile have deferent result, i wanna cover whole top where bar should be

13

ah ok so i’m looking

14

this is what im trying to fix, and tablet view is not good

Screen Shot 2021-05-21 at 5.59.48 AM
Screen Shot 2021-05-21 at 5.59.48 AM646×690 86.4 KB

Screen Shot 2021-05-21 at 6.00.11 AM
Screen Shot 2021-05-21 at 6.00.11 AM1470×930 138 KB

15

ok this version ?

image
image539×915 62.8 KB

image
image773×593 62.5 KB 

<img class="back_image" src="https://images.unsplash.com/photo-1519046904884-53103b34b206?ixid=MnwxMDEzNjV8MHwxfHNlYXJjaHwyfHxiZWFjaHxlbnwwfHx8fDE2MjA4MjMwODI&ixlib=rb-1.2.1">
    <pre><span><style>
    .back_image{
position:fixed;
width:100%;
height:calc(20% + 10px);
margin-left:-15px;
-ms-transform: translate(0%, -10%);
transform: translate(0%, -100%);
    }
    .jiuuwu svg {
    display: none;
    }
    [data-test="glide-app-bar"]
    {display: none}
16

or

image
image781×647 66.5 KB 

<img class="back_image" src="https://images.unsplash.com/photo-1519046904884-53103b34b206?ixid=MnwxMDEzNjV8MHwxfHNlYXJjaHwyfHxiZWFjaHxlbnwwfHx8fDE2MjA4MjMwODI&ixlib=rb-1.2.1">
    <pre><span><style>
    .back_image{
position:fixed;
width:200%;
height:calc(20% + 10px);
margin-left:-15px;
-ms-transform: translate(-20%, -100%);
transform: translate(-20%, -100%);
    }
    .jiuuwu svg {
    display: none;
    }
    [data-test="glide-app-bar"]
    {display: none}
17

for some rezone, right side is going too much

Screen Shot 2021-05-21 at 6.15.38 AM
Screen Shot 2021-05-21 at 6.15.38 AM2148×1198 172 KB

18

is there a way to set right margin where right panel ends?

19

I have never done a test in this direction.
I play with max-width to limit to the tablet view (which is fixed under glide)

image
image1529×911 133 KB 

<img class="back_image" src="https://images.unsplash.com/photo-1519046904884-53103b34b206?ixid=MnwxMDEzNjV8MHwxfHNlYXJjaHwyfHxiZWFjaHxlbnwwfHx8fDE2MjA4MjMwODI&ixlib=rb-1.2.1">
    <pre><span><style>
    .back_image{
position:fixed;
width:200%;
max-width:705px;
height:calc(20% + 10px);
margin-left:37px;
-ms-transform: translate(-8%, -100%);
transform: translate(-8%, -100%);
    }
    .jiuuwu svg {
    display: none;
    }
    [data-test="glide-app-bar"]
    {display: none}
20

almost perfect! i need it to be in front, so scrolling text will not go over it