From f62618dadfe2d8a37650978b7e275e1ce6bb8ccb Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Mon, 26 Oct 2015 12:06:41 -0400 Subject: [PATCH] Expand view to wrap contents on small screens `inline-block` causes #view width to expand to its children's width. `min-width: 100%` is necessary for larger screens, so that the `inline-block` element is still grows to contain all the available width. The 1px of padding is apparently needed for Android Chrome, otherwise the right edge has blue from the body background showing. --- src/main.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/main.scss b/src/main.scss index a7889cd29..78840ed01 100644 --- a/src/main.scss +++ b/src/main.scss @@ -68,10 +68,12 @@ a:hover { } #view { + display: inline-block; + /* NOTE: Margin should match height in navigation.scss */ margin-top: 50px; background-color: $background-color; - - padding: 20px 0; + padding: 20px 1px; + min-width: 100%; min-height: 768px; }