Changeset - ba453a80c2a4
[Not reviewed]
0 1 0
Bradley Kuhn (bkuhn) - 7 years ago 2015-03-05 19:56:22
bkuhn@ebb.org
Avoid left floating dt's on small screens.

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.
1 file changed with 19 insertions and 2 deletions:
0 comments (0 inline, 0 general)
www/conservancy/static/conservancy.css
Show inline comments
...
 
@@ -327,6 +327,22 @@ body.conservancy-supporter #navbar ul li.supporter a
 
   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 {
 
    border: 3px double #ccc;
 
    padding: 0.5em;
...
 
@@ -334,14 +350,15 @@ dl {
 
dt {
 
    float: left;
 
    clear: left;
 
    text-align: center;
 
    width: 10em;
 
    margin: 0em 1em 0.5em 0.5em;
 
    text-align: center;
 
    font-weight: bold;
 
    color: green; }
 
dt:after {
 
    content: ":";
 
}
 
dd {
 
    margin: 0 0 2em 11em;
 
    margin: 0 0 2.5em 11em;
 
}
 
}
0 comments (0 inline, 0 general)