7 replies · opened Jun 21, 2022
Hi, I am using slider-canvas-fade.html. and wonder how I can keep the image ratio. Currently, any slider images change the ratio when resizing and it's critical when using a photo with people in it. Some people on both sides may cut off, etc.
Any help will be much appreciated.
Hello,
Thanks for your Patience!
Keeping the Image Ratio for Background Images is currently not supported out of the box, however, the Ratio can be defined manually using the Height in different viewports.
You can consider using the following code to adjust the Heights according to different devices and choose what looks best:
[ch_pre type="css"].device-xl .slider-element {
height: 100vh !important;
}
.device-lg .slider-element {
height: 100vh !important;
}
.device-md .slider-element {
height: 80vh !important;
}
.device-sm .slider-element {
height: 60vh !important;
}
.device-xs .slider-element {
height: 50vh !important;
}[/ch_pre]
You can change the values and also set fixed heights. The Responsive Classes are as follows:
.device-xl – Class for Large Devices >=1200px
.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
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Thank you so much!!!
Hello,
Apologies! We just checked and the .swiper-element Class should be .slider-element. We have just updated the codes above.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
I am having an issue with the code you provided. https://www.misowebdesign.com/testlab/lds/
The temp site has the Canvas slider and I added the code to style.css, but it's not working. The height is still the same. I want the slider height to be 100% above 1200px, 600px between 992px and 1199px, 500px on tablet pcs, etc.
Any help will be much appreciated.
--
I've updated the code, but still the height doesn't change.
It worked! it was due to the code in the HTML file in slider id="slider" where it has min-vh-60 min-vh-md-100
I removed it and it worked.
Thank you!
Sorry. There's still an issue.
I used this code below.
.device-xl .slider-element {
height: 100vh !important;
}
.device-lg .slider-element {
height: 80vh !important;
}
.device-md .slider-element {
height: 70vh !important;
}
.device-sm .slider-element {
height: 50vh !important;
}
.device-xs .slider-element {
height: 50vh !important;
}
And the problem is that it works fine in portrait mode on mobile, but in the landscape mode, it is way too short as you can see in the attached screenshots. Can you please let me know what needs to be done?
Thank you!
Hello,
You can consider targeting the .device-sm Block and change the height accordingly. Additionally, you can also use specific Media Queries and define heights according to that. Example:
[ch_pre type="css"]@media (min-width: 576px) and (max-width: 767.98px) {
.slider-element {
height: 65vh !important;
}
}[/ch_pre]
This should definitely work fine. 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