Eric lippert - Amazon Web Services

This as we can see is not pretty at all, so we go ahead and apply
the following CSS styling
But now let’s reduce the size of the browser and see how this looks
.imageColumns {
margin: 10px;
}
.mediaImage {
max-width: 85%;
max-height: 200px;
}
.mediaDiv {
float: left;
width: 16%;
margin: 2px;
height: 200px;
border: 1px solid #7ba9ca;
display: table-cell;
vertical-align: middle;
text-align: center;
}
h3 {
font-family: ‘Segoe UI’;
font-size: 0.8em;
}
As we can see, the images shrunk due to the width specified in
% but the image divs are beginning to look odd with their fixed
height.
Finally if we look at the results in a Mobile browser (simulated), it
looks totally wacky.
This sets up four CSS classes.
The ‘mediaDiv’ class arranges the image divs so that they float left
instead of going one under the other. Once all horizontal spacing
is occupied, it wraps the next div into the next line. They have been
given a height of 200 pixels and a width of 16% which will roughly
accommodate 6 images per line.
The ‘mediaImage’ class sets the max-width of the image to 85% so
that there is some spacing between two horizontal images, and a
max-height is set to the same as the height specified in the
‘mediaDiv’. This ensures that the aspect ratio for the images are
maintained when we change the browser width. Let’s run this and
see how it looks in various browser sizes. This time we ‘Get’ images
for a Twitter handle called ‘FascinatingPics’. As we can see below,
we have a nice collage of the 20 latest images posted by this
account.
So our one-size-fits all CSS style quickly breaks down as we view
the page in different form-factors. We need to do something better.
Getting Media Queries into Play
As we can see from above, the Mobile view looks the most out of
place. So let’s fix that first using a Media Query to declare a new
set of styles. But before we do that, let’s do some house-cleaning
first.
DNcmagazine www.dotnetcurry.com | 53