Slider photos do not show up fully on mobile

2 replies · opened Mar 18, 2020

SserkanorenMar 18, 2020

Hi
The photos I added to the slider are not compatible on mobile screens. I want to make the full screen photo compatible with the mobile screen.

test.antalyaulasim.com.tr
you can see

SserkanorenMar 19, 2020

did you forget me :)

SSemicolon WebSTAFFMar 20, 2020

Hello,

Thanks for your Patience! Yes, we did accidentally missed your Support Ticket. Apologies about the Delay!

You can consider using an Alternate Image or changing the Background Properties of the Image using the Responsive Classes. Example:


.device-xl .slider-element .swiper-slide { background: {css-properties}; }

.device-lg .slider-element .swiper-slide { background: {css-properties}; }

.device-md .slider-element .swiper-slide { background: {css-properties}; }

.device-sm .slider-element .swiper-slide { background: {css-properties}; }

.device-xs .slider-element .swiper-slide { background: {css-properties}; }

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 inside the Slider as well depending on your requirements.

This will 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