Hello. I downloaded a cute slider hw-slider : http://heavenweb.ru/demo/hwslider/index.html (the whole code is registered in one page). I stretched the entire width, writing in styles width:100% instead of pixels, and it turned out almost what I need. I transferred the styles and scripts into separate files and hooked up <meta name="viewport" content="width=device-width, initial-scale=1.0"> in html so that you can change the slider depending on the mobile device. I am not satisfied with the display on small screens up to 420px , the height is too high and part of the image is “eaten”. I tried to set the height in % instead of the width, but then the images disappeared altogether. Combinations max-height and min-height , that in pixels, that in % too, yielded nothing. The css code, where I changed the parameters:

 #slider-wrap { width:100%; } #slider { width:100%; height:360px; overflow: hidden; position:relative; border:#eee solid 10px; } @media (max-width:900px){ #slider-wrap{ width:97%; } } @media (max-width:420px){ #slider-wrap{ width:96%; } }

The question is whether this slider can be made to show the whole picture, regardless of the width of the screen, and what is my mistake? Thank you in advance for constructive criticism.

  • one
    You can attach photos, what would we see exactly what problems? Or provide a link to your full code - Yuri
  • The question is closed. I was advised to transfer all the code to a new file and delete the old one. - Empiric

0