I'm not seeking a revolutionary way to handle the images, as I have already consumed a lot of information about loading images.
My focus is on basic responsive design, where I aim to load a large image and compress it as the window size reduces.
Below is the CSS code I have written:
@media (max-width:420px){
#header #logo{
width:60%;
float:left;
background:red;
}
#header #logo #image{
margin:5%;
width:20%;
float:left;
background:green;
}
#header #nav{
width:40%;
float:left;
background:purple;
}
#header #nav #search{
max-width:33%;
float:left;
}
#header #nav #account{
max-width:33%;
float:left;
}
#header #nav #menu{
max-width:33%;
float:left;
}
}
Here is the accompanying HTML:
<div id="logo">
<div id="image">
s
</div>
</div>
<div id="nav">
<div id="search">
<img src="assets/images/mobile-search.png"/>
</div>
<div id="account">
<img src="assets/images/mobile-account.png"/>
</div>
<div id="menu">
<img src="assets/images/mobile-menu.png"/>
</div>
</div>
The challenge I am facing is that the images are not resizing as the window is resized. What is the correct CSS syntax to achieve this?
Thank you :)