Slider Issue

Hello

on my homepage i have a full width slider and it seems fine on my screen (1920×1080) but on other lower resolution screens it doesn’t fit properly and goes over the edge so parts of the images are missing, this can be viewed by adjusting the size of the window as well. i have attached a screenshot of how this looks on a different screen

any idea of how this can be fixed?

Thank you

Attachments:

You must be logged in to view attached files.

Hello,

The background image is cut on smaller screens. It is the way it works and our theme does not influence.

You can hide the column on smaller screens and create another one and insert the image element. The image would scale but not cut.

Best Regards

But this is a slider not just a background image, should the slider not scale seems it is set to “Make slider full width”

Hello,

It does not matter. The image on the background is cut by its nature. There is a trick. You can assign a class to row and write the background with custom CSS using background-size: cover on desktop and contain on mobile. Please note, your content may go beyond the image size on mobile.

Best Regards

i can’t seem to get this to work

on the homepage, in edit i click edit this row, scroll to the bottom for “Extra class name” and enter “slider home”

i then go to theme settings, Custom CSS, and under Custom CSS for desktop i enter

.sliderhome {
background-size: cover;
}

but this seems to have no affect at all

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .owl-carousel .owl-stage .owl-item div.basel-slide{
	background-size: contain;
}

Reduce the slider height or upload the images with bigger height

Best Regards

[Author]

Posts