Home Forums Basel – Premium Template Slider Issue

This topic contains 5 replies, has 2 voices, and was last updated by Elise Noromit Elise Noromit 3 months, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #128340

    Absolute
    Customer

    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

    Private Content Hidden
    • This topic was modified 4 months ago by  Absolute.
    Attachments:
    You must be logged in to view attached files.
    #128395

    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

    #128430

    Absolute
    Customer

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

    #128458

    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

    #131911

    Absolute
    Customer

    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

    #132005

    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.