#media width doesn't fill full page, what I am doing wrong? - html

Question

I want to make an 100% full page, within 4 images on each row. But if you resize the window you'll get 3 images than 2 images till there is 1 left. After research I become at #media to fill the full page without getting any blank spaces. Now i've made this jsfiddle but if you resize the results window you will see blank spaces who are not filled. What am I doing wrong?
#media only screen and (min-width : 354px) {
/* Smartphone view: 1 tile */
.image{
width: 100% }
https://jsfiddle.net/8hfLkb3k/
The image always must fill both width's, if the width is 50% for 2 both images must fill it in for 50%.
Thanks.

Answer 1

I recommend using max-widths for your media queries, but you don't have to do this, as long as what you do gives you the intended and correct result.
In my working example I've chosen to set the one-image container for 25% unless something changes like the viewport width.
At 1024, 767 and 600 I've chosen the 1/3 and 1/2 sizes and finally the 100% width.
I expect this is what you mean, but feel free to adapt this code as you see fit, especially to match the media query viewport attributes to what you desire.
* {
box-sizing: border-box;
}
.one-image {
width: 25%;
float: left;
border: 1px solid red;
}
.one-image img {
width: 100%;
border: 1px solid blue;
display: block;
}
#media screen and (max-width: 1068px) {
.one-image {
width: 33.33%;
}
}
#media screen and (max-width: 767px) {
.one-image {
width: 50%;
}
}
#media screen and (max-width: 600px) {
.one-image {
width: 100%;
}
}
<div class="one-image">
<img src="http://placehold.it/200x200">
</div>
<div class="one-image">
<img src="http://placehold.it/200x200">
</div>
<div class="one-image">
<img src="http://placehold.it/200x200">
</div>
<div class="one-image">
<img src="http://placehold.it/200x200">
</div>

Answer 2

Your images (<img> elements) are not expanding to the full width of the .image containers because you're missing this rule, which you can add to your CSS:
.image img {
width: 100%;
}
Here's your example code updated to show this working:
.image img {
width: 100%;
}
.f_left {
float: left;
}
#media only screen and (min-width: 354px) {
/* Smartphone view: 1 tile */
.image {
width: 100%;
}
}
#media only screen and (min-width: 708px) {
/* Smartphone view: 2 tile */
.image {
width: 50%;
}
}
#media only screen and (min-width: 1062px) {
/* Small desktop / ipad view: 3 tiles */
.image {
width: 33.3%;
}
}
#media only screen and (min-width: 1417px) {
/* Medium desktop: 4 tiles */
.image {
width: 25%;
}
}
<div class="image f_left">
<img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
<div class="image f_left">
<img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
<div class="image f_left">
<img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
<div class="image f_left">
<img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>