philippenewman
commented
7 years ago Figured it out.
Changed the Width to Auto.
Apparently, with the max-height set to 80vh on each Image tag inside the Slider and the width set to 100%, on desktop browsers (at least, firefox) it was rendering just fine, despite that the containing Slider Div actually had no defined width, whereas on Mobile it was rendering this 100% as full Slick container 100%.
Keeping the height CSS as it was and then setting width: auto; sorted it out for both desktop and mobile.
Hello all!
I'm running into an issue I can't explain. I have Slick setup to display 3 slides, centerMode to true and draggable. It works great. I set the entire container div of the slick scroller to be display None at mobile view (480px and below or something around there) and then just display the images in block mode, centered, which is fine. However, I want the Slick Scroller to still be visible to users on a tablet. Problem is, when loading the page on a tablet, the Slick Scroll carousel shows only the center-most Div (image) and stretches it disproportionately to fill the entire screen. It still scrolls, but the appearance is ghastly. I don't understand what's causing this, because re-sizing the window on a desktop does not produce any problem whatsoever.
This is the site:
http://philippenewman.com/photography/sanfrancisco.html
And here is my markup:
`<!DOCTYPE html>