Hejka, mam pewien problem z responsywnością strony na wysokość. Obrazki się nie zmniejszają i przechodzą do sekcji 2. Próbowałem już z margin-bottom zadziałało lecz nie zachowało wysokości równej 100vh. Poniżej dołączam kod i zdjęcie przedstawiające problem. Z góry dzięki za pomoc.
Kod CSS:
.section1 { width: 100vw; height: 100vh; max-width:100%; } .section1 img { position: absolute; padding-top: 14%; margin-left: 37%; width: 25%; z-index: 99; } .fballimg { padding-bottom: 8%; } .section1 img.ronaldo-clip { width: 20%; height: auto; float: left; margin-left: 21%; margin-bottom: 13%; } .section1 img.lewy-clip { width: 10%; height: auto; margin-right: 20%; float: right; right: 7%; top: 3%; }
Kod Html:
<div class="section1"><!--Tło multimedialne--><video autoplay loop muted id="bg-video"><source src="UEFA_Champions_League_2015_2016_Intro_HD_PES_2016_.webm" type="video/webm"><source src="UEFA Champions League 2015 2016 Intro HD (PES 2016 Intro).mp4" type="video/mp4"><source src="video.ogg" type="video/ogg"></video><div class="fballimg"><img class="logostart" src="img/logo.png" alt="LOGO"><img class="ronaldo-clip" src="img/ronaldo-clip.png" alt="clipart przedstawiający Ronaldo"><img class="lewy-clip" src="img/lewandowski.png" alt="Lewandowski Clipart"><div id="player"><div id="myElement"></div><script> var playerInstance = jwplayer("myElement"); playerInstance.setup({ image: "http://content.jwplatform.com/thumbs/qXS1oind-1280.jpg", width: "41%", aspectratio: "16:9", sources: [{ file: "http://content.jwplatform.com/videos/qXS1oind-JtBrAYOi.mp4", label: "720p HD" },{ file: "http://content.jwplatform.com/videos/qXS1oind-mXAaqNQX.mp4", label: "406p SD","default": "true" },{ file: "http://content.jwplatform.com/videos/qXS1oind-cCMX70i5.mp4", label: "180p Web" }] });</script></div></div></div>
Image may be NSFW.
Clik here to view.