Stacking images for the purpose of a media query - html

Question

simple question, with a simple answer that I cannot seem to figure out.
I have 12 images in the form of 6 rows and 2 columns that I would like to be formatted to 12 rows with 1 column when my media query breaks to 240 px wide.
This has got to be an incredibly easy positioning solution I am totally missing after 12 hours of working server code, but I can't find the simple solution to fix it.
Here is my markup (the same for all 12 images):
<div class="view view-first">
<img src = "img/img1.jpg" alt="First Image">
<div class="mask">
<h2>Displayed 1st Image</h2>
<p>Image example</p>
Read More
</div>
</div>
and here is my markup for all images:
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../img/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-size: 16px;
position: relative;
color: #fff;
text-shadow:3px 3px 5px #000;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
I'd show the media query but right now it is just the call and the max-width stipulation lol.
Thanks for the kind help ;)

Answer 1

If you want to use media-queries you have to use percentages for the width. That way your image will "scale" as you resizes the browser. Two rows with 6 images means each image has a width of 50%. Do note that you have to take in account margins and paddings.
You can simply put in your media query from the size of xxxx give the images width 100%.