HTML and CSS Reference
In-Depth Information
.media img {
float: left;
margin-right: 4.6875%;
max-width: 241px;
width: 100%;
height: auto;
border: solid 9px #ede0d5;
box-shadow: rgba(0, 0, 0, .25) 2px 2px 2px 0;
}
Notice we've added a
max-width
value of 241 pixels, combined with a width of 100%.
This ensures that the image will fill 100% of its parent block container (the
.media
ele-
ment), but will not exceed 241 pixels. So when the browser width gets fairly small, the im-
ages will become smaller than 241 pixels, if necessary. We've also set the height to
auto
, as
we did with the big promo image, which helps the height stay proportional to the width.
Adding Media Queries
In addition to percentages and max/min widths, to get a fully responsive website, we'll also
need to add some media queries. We're going to use them to target four different browser
widths. Each of these media queries target what are often referred to as "breakpoints":
@media (max-width: 930px) { }
@media (max-width: 730px) { }
@media (max-width: 480px) { }
@media (max-width: 340px) { }
Insideofthecurlybracesforeachofthesemediaqueries,we'regoingtoaddwhateverselect-
ors and declaration blocks we need to make the layout adjust to the specified browser width.
Adding the Viewport Meta Tag
For every responsive design, you'll want to add the following HTML tag to the
<head>
sec-
tion of your website:
<meta name="viewport" content="width=device-width,
↵
initial-scale=1.0">
