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 .
Search WWH ::

Custom Search