I've created an "aquarium" using HTML and CSS,
Now, I want to make the entire page responsive so that the elements shrink and grow based on the browser resolution. The first step is determining how the container should be structured.
Is it acceptable to include values like PX inside the main wrapper (e.g. .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.JellyFish{
position:absolute;
width:250px;
height:600px;
float:left;
}
... (CSS Styles continue)
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="container">
<div class="Fish fish1">
... (HTML code continues)
</div>
<div class="JellyFish jelly1">
... (More HTML Code)
</div>
</div>
</body>
</html>What would be the best approach for achieving this responsiveness?
Thank you!