Conservancy/website
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Avoid left floating dt's on small screens.

Browse source 
Set the min-width for the left-floating dt's to 550px, so that small
screens just get everything in one column.

Note that the formatting previously used is now moved purely to @media,
which I don't know how that will impact browsers that don't support
@media in CSS, but OTOH, I believe the graceful degradation is done
correctly here.
This commit is contained in:
Bradley M. Kuhn 2015-03-05 11:56:22 -08:00
parent 11af508b99
commit ba453a80c2
1 changed files with 19 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
www/conservancy/static/conservancy.css
View file

@ -327,6 +327,22 @@ body.conservancy-supporter #navbar ul li.supporter a
font-size: 12px; font-size: 12px;
} }
/* Make dl's ( such as for FAQ entries) look nice on screens, both big and small. */
dl {
border: 3px double #ccc;
padding: 0.5em;
}
dt {
text-align: center;
margin: 0em 1em 0.5em 0.5em;
font-weight: bold;
color: green; }
dd {
margin: 0 0 1.5em 2em;
}
@media only screen and (min-width: 550px) {
dl { dl {
border: 3px double #ccc; border: 3px double #ccc;
padding: 0.5em; padding: 0.5em;
@ -334,14 +350,15 @@ dl {
dt { dt {
float: left; float: left;
clear: left; clear: left;
text-align: center;
width: 10em; width: 10em;
margin: 0em 1em 0.5em 0.5em; margin: 0em 1em 0.5em 0.5em;
text-align: center;
font-weight: bold; font-weight: bold;
color: green; } color: green; }
dt:after { dt:after {
content: ":"; content: ":";
} }
dd { dd {
margin: 0 0 2em 11em; margin: 0 0 2.5em 11em;
}
} }