HTML and CSS Reference
In-Depth Information
Figure 17-9.
The basic styles stack the content vertically
8. delete the existing styles for
.figure.floatleft
and
.figure.floatright
, and
create a group selector to center the images and prevent them from floating:
.figure.floatleft, .figure.floatright {
margin: 3px auto;
float: none;
}
9. depending on their orientation, the images are
400px
or
260px
wide. The wider
images are styled with the
figure
class, so set its maximum width at
400px
. This
is still too wide for most phones. So, change
width
in the
figure
class to
90%
. The
narrower images are unlikely to need to be scaled down, so change
width
in the
portrait
class to a maximum of
260px
. The amended styles look like this:
.figure {
max-width: 400px;
width:
90%;
}
.portrait {
max-width: 260px;
}
10. if you test the page now, the images are centered between paragraphs, as shown in
Figure
17-10
.
