slider images are cut on bigger screens

I have a slider on homepage, the problem is I have added background images on slider and some screens the images are not cut but on bigger screen resolutions images are cut.
I’m attaching screenshot as well.

on normal screens, ss1.pnog shows images are not but ss2.png shows that images are start cutting above 1800px. 2k, 3k and on 4k images are cut.

Attachments:

You must be logged in to view attached files.

Hello,

You need to set the background position for Slides – https://monosnap.com/file/w2QykK8T8369Kpd1gAOG9YOZejwc0g
For this case, you can set Left top position for Desktop – https://monosnap.com/file/M1WBVlCfmRkKB66h5pcNEl7AWsTtYS

Kind Regards

if i set left top, then i’ll be cut from bottom

The slider width depends on the width of the screen or the column where the slider is placed. The slider height depends on the values specified in the corresponding slider option. The image you selected is the background (background-image) of the slide, and it cannot affect the physical size of the slider. The CSS property background-image works in such a way that it preserves the aspect ratio of the background image while stretching it evenly across the slider, and it may be cropped if it goes beyond its boundaries, since a background image cannot affect the slider’s dimensions.

If you need the slider content to always remain visible, do not use it as a background. In this case, you should split your image into content (device, text, buttons) and background (gradient).

If it’s very important for you to use a single solid image so that it scales proportionally when the screen narrows, you need to use other elements such as an image carousel or a banner carousel.

ok sure.
see ss3.png i’ve attached, if I use separate image slicing. If i use bg and the text Airpods text as an image, then how to add image at the top. as you can in the image if i add new content it just appears above button, not starting from top.

Attachments:

You must be logged in to view attached files.

Could you please send us your admin access so we can check your configuration and help you?

access

As an example, we created a slide that solves the issue of background cropping – https://monosnap.com/file/sXXuBCdJDJoDG0fRCYKRzfg9JmzC10
For implementation, a container is required instead of a section. This slide is just an example of how to separate content and background.

For the final look, to adapt it to your website, additional adjustments are needed, including typography, background, and spacing. After replacing it with your images, you need to check the slide on responsive layouts and, if necessary, adjust the min-height of the main container – https://monosnap.com/file/xALRCFyX3jIozwrZBoO1hsi7carPzp

Based on this example, you should remake other slides by replacing the sample image with a separate device image and replacing the label with your own separate image (note that to properly align the image with the edge of the slide, you need to set a negative margin on the left side – https://monosnap.com/file/PRAyPSsUQP6536PBravQ0MHwT2Im9K
). Alternatively, you can use our structure, which we built without having your original image source.

The structure works in such a way that thanks to the height of the main container, the child elements are positioned at the edges using space-between.

As you can see in the image, the charge text with is still not on left edge, on some bigger screens it’s coming forward. I want to be at left edge, what the the desktop screen size is

Attachments:

You must be logged in to view attached files.

temporary login

In the slide settings –https://monosnap.com/file/bK1rvLVpITuNhS3pdjaEUmUGdwiCSg – in the Content tab, enable two options: Content without space and Full width content – https://monosnap.com/file/YCKH3aT5A9KASQYMTL4M2D8oBTID3s

Then apply the following custom CSS in Theme settings → Custom CSS → Global CSS:

.xts-without-padding.xts-slide-container {
	max-width: 100%;
}

[Author]

Posts