diff --git a/index.html b/index.html index 8258580..5784c9c 100644 --- a/index.html +++ b/index.html @@ -314,6 +314,7 @@ button:hover, button:focus { background: rgba(255,255,255,.05); } + /* Responsive Design */ @media (min-width: 0px) { html { font-size: 76%; } #aboutcontainer, #newscontainer, #contactcontainer { padding-right: 3%; padding-left: 3%; } @@ -403,37 +404,37 @@ html { font-size: 108%; } #aboutcontainer { padding-right: 14%; padding-left: 14%; } #newscontainer { padding-right: 17%; padding-left: 17%; } - #contactcontainer { padding-right: 30%; padding-left: 30%; } + #contactcontainer { padding-right: 29%; padding-left: 29%; } } @media (min-width: 1700px) { html { font-size: 110%; } #aboutcontainer { padding-right: 15%; padding-left: 15%; } #newscontainer { padding-right: 18%; padding-left: 18%; } - #contactcontainer { padding-right: 31%; padding-left: 31%; } + #contactcontainer { padding-right: 30%; padding-left: 30%; } } @media (min-width: 1800px) { html { font-size: 112%; } #aboutcontainer { padding-right: 16%; padding-left: 16%; } #newscontainer { padding-right: 19%; padding-left: 19%; } - #contactcontainer { padding-right: 32%; padding-left: 32%; } + #contactcontainer { padding-right: 31%; padding-left: 31%; } } @media (min-width: 1900px) { html { font-size: 114%; } #aboutcontainer { padding-right: 17%; padding-left: 17%; } #newscontainer { padding-right: 20%; padding-left: 20%; } - #contactcontainer { padding-right: 33%; padding-left: 33%; } + #contactcontainer { padding-right: 32%; padding-left: 32%; } } @media (min-width: 2000px) { html { font-size: 116%; } #aboutcontainer { padding-right: 18%; padding-left: 18%; } #newscontainer { padding-right: 21%; padding-left: 21%; } - #contactcontainer { padding-right: 34%; padding-left: 34%; } + #contactcontainer { padding-right: 33%; padding-left: 33%; } } @media (min-width: 2100px) { html { font-size: 118%; } #aboutcontainer { padding-right: 19%; padding-left: 19%; } #newscontainer { padding-right: 22%; padding-left: 22%; } - #contactcontainer { padding-right: 35%; padding-left: 35%; } + #contactcontainer { padding-right: 34%; padding-left: 34%; } } @media (min-width: 2200px) { html { font-size: 120%; } @@ -445,13 +446,13 @@ html { font-size: 122%; } #aboutcontainer { padding-right: 21%; padding-left: 21%; } #newscontainer { padding-right: 24%; padding-left: 24%; } - #contactcontainer { padding-right: 44%; padding-left: 44%; } + #contactcontainer { padding-right: 37%; padding-left: 37%; } } @media (min-width: 2400px) { html { font-size: 124%; } #aboutcontainer { padding-right: 22%; padding-left: 22%; } #newscontainer { padding-right: 25%; padding-left: 25%; } - #contactcontainer { padding-right: 46%; padding-left: 46%; } + #contactcontainer { padding-right: 38%; padding-left: 38%; } }