1 reply · opened Aug 7, 2022
Hi
I am using your theme and I am delighted.
I use the slider on the link
I have a problem with the image in the mobile version, it crops the image and does not reduce it to the size of the phone.
And is there a possibility to display the picture from the top of the picture, this way the heads of the people in the picture are not visible
Hello,
Thank You so so much for the Kind Words! :)
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. Additionally, you can also change the background position as per devices. Example:
[ch_pre type="css"].device-xs .swiper-slide-bg {
background-position: top center !important;
}[/ch_pre]
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.
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