Information Technology Reference
In-Depth Information
display:inline; /* displaying our articles inline prevents our articles from
stacking on top of each other */
}
article h1, article h2 {
margin-bottom:10px;
font-family:Bevan, "Times New Roman", Times, serif;
}
article .entry {
text-align:justify; /* to give the page a more realistic feel we will justify the
column text */
}
article figure {
width:90%;
padding:0;
margin:10px auto 20px auto;
}
article figcaption {
font-style:italic;
text-align:right;
}
Now we'll set up the Smartphone code (in Listing 5-5) and adjust the layout accordingly.
Listing 5-5.
CSS Code for The Daily Droid, part 3
/*
Android Smartphone Devices
Here we will use CSS3 media queries to determine
the resolution of our screen and present the user with
a completely different layout if their viewing
does not meet certain requirements.
Here we are targeting smartphone devices that will,
on average, have a width of 320px (portrait) and up
to 569px (landscape).
This layout will display the content in a more
commonly used smartphone style layout, presenting the
user with a list of articles that they can scroll up
and down to view.
*/
@media screen and (min-width: 320px) and (max-width: 569px) {
body {
-webkit-box-shadow: inset 0 -5px 50px rgba(153,99,38,1); /* lessen the shadow on
the page to adjust to the screen's new dimensions */
box-shadow: inset 0 -5px 50px rgba(153,99,38,1);
}
h1 {
font-size:20px; /* lower the size of the header font to accommodate the smaller
screen resolution */
line-height:24px;
}
h6 {
font-size:12px; /* same as the h1 above it */
}
#mast h1 {
font-family:'UnifrakturCook', Georgia, "Times New Roman", Times, serif;
font-size:42px;
