I’ve created an "aquarium" via html and css,
I would like to turn all of the current page to responsive, that will make the "draws" shrink and grow according to the browser resolution.
For start, how the container should look like?
And is it ok to have value like PX inside the primary warp(for example: .Fish or .JellyFish)?
body{ width:100%; margin:100px auto; } div#container{ width:100%; text-align:center; } div.Fish{ position:absolute; width:200px; height:120px; float:left; } div.Fish div.fishBody{ width:150px; height:70px; border-radius:50%; border:solid 1px silver; background-color:silver; margin: 0 0 0 25px; } div.Fish div.fishBody div.fishEye { float:right; margin:25px; width:15px; height:15px; border-radius:50%; background-color:#000000; } div.Fish div.fishBody div.fishEye div.fishEyePupil { float:right; width:5px; height:5px; margin:5px 2px 0 0; border-radius:50%; background-color:#fff; } div.Fish div.fishMouth{ float:right; position:relative; width: 0; height: 0; margin:40px 20px 0 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 15px solid #fff; } div.Fish div.topFin { position:relative; width: 0; height: 0; margin:-10px 0 0 70px; top:10px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid silver; } div.Fish div.bottomFin { position:relative; width: 0; height: 0; margin:0 0 0 70px; bottom:10px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 30px solid silver; } div.Fish div.backFin { float:left; position:relative; width: 0; height: 0; margin:35px 0 0 0px; bottom:10px; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 30px solid silver; } .fish1{ left:800px; top: 300px; animation: myFishmove1 5s infinite; animation-direction: alternate; } .fish2{ left:1200px; top: 600px; animation: myFishmove2 5s infinite; animation-direction: alternate; } .fish3{ left:1600px; top: 200px; animation: myFishmove3 5s infinite; animation-direction: alternate; } .fish4{ left:400px; top: 500px; animation: myFishmove4 5s infinite; animation-direction: alternate; } @keyframes myFishmove1 { from {left: 800px;,top:300px;} to {left:200px;top: 500px;} } @keyframes myFishmove2 { from {left: 1200px;,top:600px;} to {left:400px;top: 900px;} } @keyframes myFishmove3 { from {left: 1600px;,top:200px;} to {left:2000px;top: 600px;} } @keyframes myFishmove4 { from {left: 400px;,top:500px;} to {left:1200px;top: 100px;} } div.JellyFish{ position:absolute; width:250px; height:600px; float:left; } div.JellyFish div.jellyHead{ width:200px; height:100px; background-color:lightblue; border-top-left-radius: 100px; border-top-right-radius: 100px; } div.JellyFish div.legType1 { float:left; width: 40px; height: 170px; border-right: solid 8px lightblue; border-radius: 0 0 50%/100px 100px; } div.JellyFish div.legType2 { margin: 0 0 0 15px; float:left; width: 40px; height: 230px; border-right: solid 8px lightblue; border-radius: 0 0 50%/100px 100px; } div.JellyFish div.legType3 { margin: 0 0 0 50px; float:left; width: 50px; height: 120px; border-left: solid 8px lightblue; border-radius: 0 0 0 50%/100px; } @keyframes myJellymove1 { from {top: 180px;} to {top: 400px;} } @keyframes myJellymove2 { from {top: 300px;} to {top: 600px;} } @keyframes myJellymove3 { from {top: 100px;} to {top: 700px;} } @keyframes myJellymove4 { from {top: 400px;} to {top: 800px;} } @keyframes myJellymove5 { from {top: 600px;} to {top: 200px;} } .jelly1{ left:500px; top:180px; animation: myJellymove1 5s infinite; animation-direction: alternate; } .jelly2{ left:800px; top:300px; animation: myJellymove2 5s infinite; animation-direction: alternate; } .jelly3{ left:1100px; top:100px; animation: myJellymove3 5s infinite; animation-direction: alternate; } .jelly4{ left:1400px; top:400px; animation: myJellymove4 5s infinite; animation-direction: alternate; } .jelly5{ left:1800px; top:600px; animation: myJellymove5 5s infinite; animation-direction: alternate; }<html> <head> <link rel="stylesheet" href="main.css"> </head> <body> <div id="container"> <div class="Fish fish1"> <div class="backFin"></div> <div class="fishMouth"></div> <div class="topFin"></div> <div class="fishBody"> <div class="fishEye"> <div class="fishEyePupil"></div> </div> </div> <div class="bottomFin"></div> </div> <div class="Fish fish2"> <div class="backFin"></div> <div class="fishMouth"></div> <div class="topFin"></div> <div class="fishBody"> <div class="fishEye"> <div class="fishEyePupil"></div> </div> </div> <div class="bottomFin"></div> </div> <div class="Fish fish3"> <div class="backFin"></div> <div class="fishMouth"></div> <div class="topFin"></div> <div class="fishBody"> <div class="fishEye"> <div class="fishEyePupil"></div> </div> </div> <div class="bottomFin"></div> </div> <div class="Fish fish4"> <div class="backFin"></div> <div class="fishMouth"></div> <div class="topFin"></div> <div class="fishBody"> <div class="fishEye"> <div class="fishEyePupil"></div> </div> </div> <div class="bottomFin"></div> </div> <div class="JellyFish jelly1"> <div class="jellyHead"></div> <div class="legType1"></div> <div class="legType2"></div> <div class="legType3"></div> </div> <div class="JellyFish jelly2"> <div class="jellyHead"></div> <div class="legType2" style="margin: 0;"></div> <div class="legType1"></div> <div class="legType3"></div> </div> <div class="JellyFish jelly3"> <div class="jellyHead"></div> <div class="legType2" style="margin: 0 50px 0 0;"></div> <div class="legType3" style="margin: 0 0 0 0;"></div> <div class="legType1" style="border-radius: 0 50%/100px 100px 0;border-right:none;border-left:solid 8px lightblue;"></div> </div> <div class="JellyFish jelly4"> <div class="jellyHead"></div> <div class="legType1"></div> <div class="legType2"></div> <div class="legType3"></div> </div> <div class="JellyFish jelly5"> <div class="jellyHead"></div> <div class="legType2" style="margin: 0;"></div> <div class="legType1"></div> <div class="legType3"></div> </div> </div> </body> </html>what is the best option to do that?
Thanks!
As I can see you have used px units to move your objects in keyframes. Either you should use percentage % based units to move objects. To make the current page working in all viewports just add:
body{ overflow:none; } add the overflow: none property to your body tag to remove horizontal and vertical scrollbars from the page, but your some fishes will be cropped out based on the size of the viewport.
Hope I Helped ????