Canvas Support

images are not resizing properly to different screens.

1 reply · opened Sep 20, 2023

GgkreddymxSep 20, 2023

I have attached original image and when i add this to slider, images are not resizing properly to different screens. If i specify height then the images are cut to half instead of adjusting height. Also please tell me how to add masking and overlay text by providing linear gradient from left to right over the image

<section id="slider" class="slider-element slider-parallax min-vh-75 min-vh-xl-100 swiper_wrapper">
		<div class="slider-inner">
	
			<div class="swiper-container swiper-parent">
				<div class="swiper-wrapper">		
					<!-- First Slide -->
					<div class="swiper-slide dark">
						<!-- Slider Content -->
						<div class="swiper-slide-bg" style="background-image: url('images/solutions/1.jpg');"></div>
					</div>
				</div>
			</div>

		</div>
	</section>
SSemicolon WebSTAFFSep 20, 2023

Hello,

The .swiper-slide-bg uses background-size:cover for to display the Images in the best optimum resolution. You may consider using a different image or background positions for responsive devices based on your requirements as it may work best in this case. Example:

[ch_pre][/ch_pre]

[ch_pre type="css"].device-md .background-position-class { background-position: left center !important; }

.device-sm .background-position-class { background-position: center center !important; }

.device-xs .background-position-class { background-position: 30% 50% !important; }[/ch_pre]

Additionally, you can also consider using a different background-image CSS Property like url('image.jpg'), changing them for different devices as mentioned above.

This will definitely work fine. The Responsive Classes are as follows:

.device-xxl – Class for Larger Devices >=1400px

.device-xl – Class for Large Devices >=1200px to 1399px

.device-lg – Class for Medium Devices >=992px to 1199px

.device-md – Class for Tablets

.device-sm – Class for Landscape Mobiles or Phablets.

.device-xs – Class for Portrait Mobiles

You can also change other CSS Properties using the above codes.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard