Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Making site more responsive

Addresses #2
Addresses #1
  • Loading branch information...
commit 67ee44b2fd1286eea0c2a977394f6e14c8e104f0 1 parent 32ba41e
Jeff Johnson authored
Showing with 62 additions and 3 deletions.
  1. +29 −2 css/main.css
  2. +33 −1 css/main.scss
31 css/main.css
View
@@ -291,8 +291,35 @@ a, a:visited, a:hover {
Theses examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
-@media only screen and (min-width: 35em) {
- /* Style adjustments for viewports that meet the condition */ }
+@media only screen and (max-width: 1200px) {
+ #container {
+ width: 100%; }
+
+ #nav-group {
+ width: 100%;
+ text-align: center; }
+ #nav-group a {
+ width: 15%;
+ margin-right: 5%;
+ margin-left: 5%;
+ font-size: 35px;
+ margin-top: 30px;
+ margin-bottom: 10px;
+ height: 40px;
+ text-align: left; }
+
+ #container.sticky #nav-group a {
+ font-size: 25px; } }
+@media only screen and (max-width: 650px) {
+ /* Style adjustments for viewports that meet the condition */
+ .photo-display {
+ float: none; }
+
+ .subsection .copy {
+ width: 100%; }
+
+ #container.sticky #nav-group a {
+ font-size: 20px; } }
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
/* Style adjustments for high resolution devices */ }
/* ==========================================================================
34 css/main.scss
View
@@ -338,9 +338,41 @@ a, a:visited, a:hover {
Theses examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
+@media only screen and (max-width: 1200px) {
+ #container {
+ width: 100%;
+ }
+ #nav-group {
+ width: 100%;
+ text-align: center;
+ a {
+ width: 15%;
+ margin-right: 5%;
+ margin-left: 5%;
+ font-size: 35px;
+ margin-top: 30px;
+ margin-bottom: 10px;
+ height: 40px;
+ text-align: left;
+ }
+ }
+ #container.sticky #nav-group a {
+ font-size: 25px;
+ }
+}
-@media only screen and (min-width: 35em) {
+@media only screen and (max-width: 650px) {
/* Style adjustments for viewports that meet the condition */
+ .photo-display {
+ float: none;
+ }
+ .subsection .copy {
+ width: 100%;
+ }
+
+ #container.sticky #nav-group a {
+ font-size: 20px;
+ }
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
Please sign in to comment.
Something went wrong with that request. Please try again.