Home › Forums › Basel support forum › Slider Issue

Slider Issue

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 13, 2019 at 7:52 am #128340

    Absolute
    Participant

    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.
    June 13, 2019 at 11:44 am #128395

    Elise Noromit
    Member

    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

    June 13, 2019 at 1:59 pm #128430

    Absolute
    Participant

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

    June 13, 2019 at 6:10 pm #128458

    Elise Noromit
    Member

    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

    July 9, 2019 at 8:08 am #131911

    Absolute
    Participant

    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

    July 9, 2019 at 3:06 pm #132005

    Elise Noromit
    Member

    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
Viewing 6 posts - 1 through 6 (of 6 total)