main.css: make images more responsive (resize, center on small screens).

diff --git a/static/css/main.css b/static/css/main.css
index 8e3f3528a38b5e6452bc3c6d62eb5369854bf2a6..2850eb1c879b442248a0d42a7ccfbbe586d64cce 100644 (file)
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -356,8 +356,8 @@ samp {
     margin-bottom: 1.3em;
 }
 
-.section-intro  p {
-    margin: 0.5em 3.5em;
+.section-intro p {
+    margin: 0.5em 7.5%;
 }
 
 .section-intro h2,
@@ -376,8 +376,10 @@ samp {
 
 .section-intro p.image { text-align: center; }
 
-.section-intro p.image > img { max-width: 100%; }
-
+.section-intro p.image > img {
+    max-width: 100%;
+    height: auto;
+}
 
 .step {
     padding: .5em 0;
@@ -419,6 +421,7 @@ samp {
 /* Images
  */
 
+/*
 ul.images:before, ul.images:after  {
     content: " ";
     display: table;
@@ -441,33 +444,37 @@ ul.images li > img {
     max-width: 600px;
     height: auto;
 }
-
-.sidebar > p > img {
-    width: 100%;
-    max-width: 600px;
-    height: auto;
-}
+*/
 
 .share-logo {
     margin-bottom: 6px;
 }
 
-.float-medium,
-.float-small {
-    display: block;
-    margin: 0 auto 20px;
-    max-width: 100%;
-    height: auto;
+p.large {
+    width: 600px;
+    border: 1px solid #aaa;
 }
 
-.float-medium {
+p.medium {
     width: 400px;
 }
 
-.float-small {
+p.small {
     width: 250px;
 }
 
+p.float,
+.sidebar > p {
+    max-width: 100%;
+    margin: 0 auto 1.5em;
+}
+
+p.float img,
+.sidebar > p img {
+    width: 100%;
+    height: auto;
+}
+
 /* Troubleshooting panel and dropdown */
 
 .troubleshooting {
@@ -783,7 +790,9 @@ input[type='reset']:hover {
     .section-intro p {
        margin: 0.5em 0;
     }
-
+    .section-intro p.float {
+       margin: 0.5em auto;
+    }
 }
 
 
@@ -810,9 +819,9 @@ input[type='reset']:hover {
 
 @media (min-width:800px) {
 
-    .float-small {
+    p.float.small {
        float:right;
-       margin:0 0 20px 30px;
+       margin:0  7.5% 20px 30px;
     }
 
 }
@@ -907,10 +916,10 @@ input[type='reset']:hover {
        width: 100%;
     }
 
-    .float-medium {
+    p.float.medium {
        float: right;
-       max-width: 50%;
-       margin: 0 0 20px 30px;
+       max-width: 40%;
+       margin: 0 7.5% 20px 30px;
     }
 
 }