1 reply · opened Feb 2, 2022
Hi, is there anyway of using the code below and making it a different photo on a mobile device? or changing the part that shows on a mobile device. It looks great on a computer but on a mobile crops the photo incorrectly?
<section id="slider" class="slider-element min-vh-60 min-vh-md-100 include-header" style="background: url('pics/intimate-wedding-venue-devon.jpg') center right no-repeat; background-size: cover;">
<div class="slider-inner">Hello,
The Background Image is resized according to the size of the available area for the best fit. You may consider using a different image for responsive devices based on your Image requirements as it may work best in this case. Example:
[ch_pre type="css"].device-xl .swiper-slide { background-image: url('image.jpg') !important; }
.device-lg .swiper-slide { background-image: url('image.jpg') !important; }
.device-md .swiper-slide { background-image: url('image.jpg') !important; }
.device-sm .swiper-slide { background-image: url('image.jpg') !important; }
.device-xs .swiper-slide { background-image: url('image.jpg') !important; }[/ch_pre]
Additionally, you can also consider using a different background-position CSS Property like center center for different devices as mentioned above.
This will definitely work fine. 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
You can use the above code for other Elements as well in the Slider.
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