Merge pull request #568 from evestera/narrow-screen-styling-tweaks

carols10cents · web-flow · commit 4f9aeb3ca190 · 2017-02-24T12:12:19.000-05:00
Tweak layout for elements on crate page to fix some small issues with narrow screens
diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -65,7 +65,11 @@ body {
     }
 
     .sep { margin: 0 10px; color: darken($html-bg, 10%); }
-    .nav, .menu { @include flex-grow(2); text-align: right; }
+    .nav, .menu {
+        @include flex-grow(2);
+        text-align: right;
+        margin-right: 5px;
+    }
 
     .menu { display: none; }
     .menu ul.dropdown {
@@ -129,6 +133,8 @@ body {
 #mobile-search {
     display: none;
     margin-bottom: 10px;
+    margin-left: 5px;
+    margin-right: 5px;
     input.search {
         width: 100%;
         margin: 0;
diff --git a/app/styles/crate.scss b/app/styles/crate.scss
@@ -9,6 +9,7 @@
 
     .info {
         @include display-flex;
+        @include flex-wrap(wrap);
         @include align-items(center);
     }
     h1 {
@@ -316,6 +317,7 @@
     h3 { margin-bottom: 5px; }
     .section {
         @include flex(1);
+        margin-right: 10px;
         li { line-height: 24px; }
         .date { color: $main-color-light; padding-left: 5px; }
     }

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,7 @@`
`9`	`9`
`10`	`10`	`.info {`
`11`	`11`	`@include display-flex;`
	`12`	`+ @include flex-wrap(wrap);`
`12`	`13`	`@include align-items(center);`
`13`	`14`	`}`
`14`	`15`	`h1 {`
`@@ -316,6 +317,7 @@`
`316`	`317`	`h3 { margin-bottom: 5px; }`
`317`	`318`	`.section {`
`318`	`319`	`@include flex(1);`
	`320`	`+ margin-right: 10px;`
`319`	`321`	`li { line-height: 24px; }`
`320`	`322`	`.date { color: $main-color-light; padding-left: 5px; }`
`321`	`323`	`}`