3 replies · opened Apr 14, 2021
Hello,
I've just noticed the canvas slider I use in this project doesn't scale on mobile devices.
Could you please help me with the resolution of the issue please? What exactly should be changed to make it work.
Thanks a lot in advance!
ps. please find enclosed the mockup of desired result.
Hello,
The Images used in the Slider are used as Background Images for best scalability on all devices and to diminish unevenness. You will need to change the Height of the Slider for the Slide Images to fit the area. Simply consider using the following code replacing the old code:
[ch_pre][/ch_pre]
This will decrease the Slider Height on Mobile Devices and make the images scale better. You can use these Height Utility Classes: http://docs.semicolonweb.com/docs/utility-classes/heights/ . If this does not fit your needs, you an always use Custom Heights.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Hello again,
Well, it still doesn't work quite well on the phone (the slider is still cut a bit), works when I simulate the view on mobile from desktop browser (on my PC), it still doesn't work quite well when I preview on my mobile device vertically (in this case I use Galaxy Note 10+ with FHD+ resolution).
It clearly seems to be connected with break points...
Anyway I was forced to increase the value of breakpoint from standard 576 to 676 or even 776 (to make it work on mobile), and again - when I did it - it started to work perfecly when I simulated mobile view on PC, but its seems it has no efffect on mobile browser directly. I tested it with several mobile browsers with dumped cache memory of course.
Here go the link to test site. Please note: @media (min-width: 776px) (is even changed to 776 instead standard 576)
Could you please test it on your phone to check if the slider is still cut.
https://www.itarts.pl/bsduszniki-test/index-start.html
Moreover - I tried with custom heights, added a few classes like .min-vh-10 etc. but the result was weird because the slider on mobile device... disappeared, when I used standard .min-vh-25 class back the slider was visible again.
Thanks again for your help!
Hello,
Apologies for the Delays in replying and Thanks for your Patience!
You can consider replacing the .min-vh-sm-50 Class with .min-vh-md-50 Class instead. However, as mentioned these are Background Images and the Slider Heights must be defined in order for the Images to scale correctly and not squish. Also, the .min-vh-10 Class does not exist and only the Classes available here: http://docs.semicolonweb.com/docs/utility-classes/heights/ can be used. If the predefined Height Utility Classes does not work well for you, you can simply consider using Fixed Heights according to the Media Query:
[ch_pre type="css"]@media (min-width: 768px) {
#slider {
height: 250px !important;
}
}[/ch_pre]
This way you will have more control over the Image Dimensions on specific media queries.
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