Want to have a page that is just one fullscreen image without slider bars

[ewk99]

What do I need to change to get an image to fit the screen exactly. Currently when I try this I get a white border on the top and bottom of my image.

[rad]

Hi @ewk99,

Thanks for reaching out.

That’s doable, but first, please inspect the section where the image is added and set all its padding to zero. Then add this CSS to your section’s CSS.

$el , $el img{
width: 100vw;
height: 100vh;
marging: 0px !important;
}

Thanks!

[ewk99]

Thanks. That helped, but there appears to still be some white margin at the bottom. Anything else I can try?

[ruenel]

Hello @ewk99,

The white gap is because of the bottom margin of the image.
Please have the code updated and use this:

$el , $el img{
  width: 100vw;
  height: 100vh;
  margin: 0px !important;
}

Hope this helps. Kindly let us know.

[ewk99]

I have the code you suggested in the global css, but the bottom white margin still appears.

[ruenel]

Hello @ewk99,

have the code updated and use this:

$el , $el img{
  width: 100vw;
  height: 100vh;
  margin: 0px !important;
}

.x-img, .x-img-none {
  margin: 0px !important;
}

We would loved to know if this has work for you. Thank you.

[ewk99]

That worked! Thanks a lot.

[ruenel]

Hey @ewk99,

It’s good to know that it works for you.

Regards.