Looking for CSS magic - background for the tablet / desktop view?

Has anyone succeeded in finding the CSS for the background for the tablet view… so I could have a lovely screen that looks like this?

Thanks! (looking for magic, as per usual :wink: :sparkles: )

1 Like

Check ?


.center-panel {




Red is working…

But I cannot get the background image to show

well what is it pretty in red :wink:
I watch.
But it seems to me that I have already seen this on the forum ??

uhm the tag is missing in your CSS !!!

.center-panel {
background-image : .............
1 Like

it’s “meuhhh” like that

1 Like

Cool! And tell no one I haven’t a clue what I’m doing :wink: (but I learn fast :slight_smile:

1 Like

as usual to check in desktop version !!!

You can also try this:

.background {
position: fixed;
height: 100%;
width: 100%;
left: 0%;
filter: brightness(50%);
background-image: url("URL"); 
background-size: cover;
background-position: center center; 

But I believe you don’t get the white center part on tablet/desktop view.


or you can do like this:

Screen Shot 2021-05-28 at 5.19.38 AM

LINK to this sample


when you click on that picture, it will take you to the app where you can see it in action.


Clever / and very nicely executed:)

1 Like

thank you… plus you are gaining extra room at the bottom… and the right side is not that empty anymore

1 Like

Hi Uzo,
Could you please share the CSS (or the app design itself) to obtain this split-screen solution?

here you go:

I believe you’re referring to this, which I cannot get to work:

no, I’m creating a whole glide screen from scratch, using CSS… the one you are showing is really hard to apply, it is easier to just move elements

So I understand even less than the little I thought I did :frowning:
What I’m trying to achieve is to stretch this elements to the full width of the screen (desktop):

it depends on the plan you are using… in the free plan… add /full at the end of the live URL… in paid plans… use tablet view and CSS to change the wrapper

.content-wrapper {
background-color:white !important;
top:0% !important;
left:0% !important;
background-size: cover !important;
background-position: center center !important;

Thanks, but that’s not what I meant.
I’d like to have the center elements (the details view) stretched over the full width of the screen.

I changed the color on your example to red just so others can understand what this code does

In other words, I’d like the center element (white) to cover the full width of the screen. This means that text (or any other elements inside the details view) will be stretched as well.

I’m on a paid plan. Does that mean my life is more complicated? :slight_smile: