Change width to max-width where possible

Author: joecan

assets/style.css

@@ -86,23 +86,23 @@ a:hover {
     margin: 0 auto;
   }
   .feature-image {
-    width: 420px;
+    max-width: 420px;
     display: block;
     margin: 0 auto;
   }
 }
 
 @media (min-width: 820px) {
   .features {
-    width: 800px;
+    max-width: 800px;
   }
   .feature {
     position: relative;
     margin-top: 1em;
     margin-bottom: 4em;
   }
   .feature-description {
-    width: 340px;
+    max-width: 340px;
   }
   .feature-image {
     position: absolute;
@@ -228,7 +228,7 @@ Not really any of those on the website though AFAIK.
   padding-top: 1em;
   color: #ddd;
   display: block;
-  width: 600px;
+  max-width: 600px;
   margin: 0 auto;
   text-align: right;
 }

src/pages/home.elm

@@ -95,7 +95,9 @@ viewFeature feature =
     , a [ class "feature-image"
         , href feature.link
         ]
-        [ img [src feature.image] []
+        [ img [src feature.image
+              , style [("width", "100%")]
+              ] []
         ]
     ]
 
@@ -185,6 +187,7 @@ example imgSrc demo code =
       [ img
           [ src ("/assets/examples/" ++ imgSrc ++ ".png")
           , alt imgSrc
+          , style [("width", "100%")]
           ]
           []
       ]
@@ -207,7 +210,7 @@ fluidList itemWidth maxColumns itemList =
 
     bulletStyle =
         [ "display" => "inline-block"
-        , "width" => toPx itemWidth
+        , "max-width" => toPx itemWidth
         , "vertical-align" => "top"
         , "text-align" => "left"
         , "margin" => ("0 " ++ toPx gutter)
@@ -285,7 +288,7 @@ company name website extension =
     [ a [ href website ]
         [ div
             [ style
-                [ "width" => "100%"
+                [ "width" => "200px"
                 , "height" => "100px"
                 , "background-image" => ("url('" ++ imgSrc ++ "')")
                 , "background-repeat" => "no-repeat"
@@ -295,6 +298,3 @@ company name website extension =
             []
         ]
     ]
-
-
-

src/shared/Center.elm

@@ -15,6 +15,6 @@ markdown width string =
 style width =
   Attr.style
     [ "display" => "block"
-    , "width" => width
+    , "max-width" => width
     , "margin" => "0 auto"
-    ]
+    ]