Background image div position on certain devices

[oriol]

See: https://www.logoglo.com/

I have a row setup with a separator at 180px tall, and a -180px margin…that blue sep at the bottom.

Adn the background image div at -180px bottom…

which works on most screens, however on tablets, in portrait view, it has a black gap at the bottom:

Any help is appreciated.

Thanks.

[marc_a]

Hey Oriol,

Thanks for reaching out!

The black gap is the section background color of your curve lines image. I highly suggest that you change the bottom from -180px to -230px or just adjust it so that the black gap will go away.

Hope that helps.

[oriol]

Hi, thanks, Im not sure this is the solution…like I said, the blue sep has a fixed height of 180px, with a -180px margin, so in theory, that should always cover the curvy lines above, right?

If I make that margin -230px, it does this:

[marc_a]

Hey Oriol,

I am referring to this svg image container.

Just adjust the bottom gap. You can also set different bottom gap in every devices by clicking bttm label text.

Hope that helps.

[oriol]

OK, but shouldn’t it be flush at the bottom if I have it at -180px? that’s a set height across all devices.

[nabeel]

Hi Oriol,

I believe the issue happens when the height of the screen increases, I tested in different screen resolutions it works fine when the height is not taller than the image (curvy lines) but the gap appears when screen height exceeds the image height. One thing you can do is, use a high resolution image so height of the screen doesn’t affect at all or you can try setting this image as background image instead of using an image element.

Hope this helps!