How to make the banner always fit and not fill empty space?

See, I set up these banners through the theme’s native slides, and I made a 1920 x 600 banner, and when I open the site on my 1920 x 1080 full HD screen, it looks perfect.

However, if I access the site on a smaller screen, it creates a huge space underneath, and it’s kind of….and I don’t know how to solve that.

And if I adjust it to a smaller screen, when I open it on the larger screen, there will be space left and it will also look strange….

I noticed that when there is no background image, only colors, this does not happen.

Look:
https://imgur.com/6v1US9F

Would you help me?

Hello,

Is there any chance that you could give me access to the dashboard area so I can have a look at the settings on your website, please?

Kind Regards

Of course, I’ll give you access:

Hello,

If you want to show the image always with full height, I suggest you enable the “Cover” option for each slider background.

https://take.ms/srYcB

You can also reach out to us if you have any questions.

Kind Regards

Hello!

But if I use the cover, it will “eat” the banner image, and it will hide images and texts from it.

What would be really cool and smart was to create more adjustment phases.

That is, instead of having a setting for just Desktop, have it like this:

Desktop above 1600px
Desktop below 1368px, something like that.

Then I could select desktop 1368px and set the desired height.

Because when configuring the height (600px) in Pixels on the 1920×1080 screen, it is perfect, but when reducing the screen to 1368×768, there is a lot of space left.

And as I said above… the Cover will hide important information from the banner, it is not usual and interesting.

Can you study any solution like that?

Adjust height according to screen size?

If in Elementor, something like this has already been released… having more screen sizes.

Because, for example, I always configure Mobile, on the screen of my cell phone, which is an iPhone 11Pro, but if a person has an iPhone Pro MAX, the screen is bigger… and it won’t look good anymore…

It would need to have more tweaking options halfway through, both for desktop and Mobile.

Have you thought about this improvement?

Hello,

If you want always fully show your content, I suggest defining that image as an Element via Image or SVG element in the page builder. Because the “Contain” option for the bg image always saves the quality of the image thus on some devices you can see that big gap at the bottom.

https://take.ms/czPhd

I’d be happy to assist if you have any other questions or concerns.

Kind Regards

Hello!

In this case, do I need to create the image with the Image or SVG element and use the contain option?

But then I can use the Woodmart slides? Or do I need to do it another way, directly through Elementor?

Because the Slides images, I do everything without the Elementor constructor, right, I just edit normally and include the image.

The idea of using Woodmart Slides is precisely for optimization.

Hello,

You need to edit the slide via page builder and define there that element.

https://take.ms/H5eGf

Don’t hesitate to let me know if you need any further help or any other info.

Kind Regards

[Author]

Posts