Improved mobile view

css/style.css

@@ -99,7 +99,7 @@ html {
 
 body {
   padding: 50px 75px;
-  min-width: 460px;
+  min-width: 370px;
   background: #ccc;
   text-align: left;
   overflow-y: scroll;
@@ -114,7 +114,7 @@ em {
 }
 
 input, button, select {
-  margin: 0 10px 10px 0;
+  margin: 0 10px 0 0;
   padding: 5px 10px;
   border: 1px solid #bbb;
   border-radius: 5px;
@@ -147,12 +147,19 @@ nav button:last-child {
   margin-right: 0;
 }
 
+aside > section {
+  display: flex;
+  align-items: stretch;
+  margin-bottom: 10px;
+}
+
 select {
   padding: 3px 10px;
 }
 
 label {
   margin-right: 10px;
+  line-height: 36px;
 }
 
 h1 {
@@ -208,6 +215,7 @@ li {
 
 li.left {
   text-align: left;
+  margin: 10px;
 }
 
 li img {
@@ -288,15 +296,37 @@ p span a:last-child {
 
 /* media queries */
 
-@media (max-width: 600px) {
+@media (max-width: 1000px) {
 
   body {
-  padding: 25px 50px 50px 50px;
-}
-
-input, select {
-  display: block;
-  width: 100%;
+    padding: 50px;
+  }
+  
+  }
+
+@media (max-width: 700px) {
+
+body {
+  padding: 30px 10px;
+}
+
+header {
+  width: 330px;
+  margin: 20px auto 50px auto;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+aside > section {
+  flex-direction: column;
+  width: 330px;
+  margin: 20px auto;
+}
+
+input, button, select {
+  margin: 0 0 5px 0;
 }
 
 }

index.html

@@ -18,6 +18,7 @@
     </header>
     <main>
       <aside>
+        <section>
           <input placeholder="search" v-model="search" aria-label="search" />
           <select v-model="type" aria-label="film type">
             <option value="all">all types</option> 
@@ -31,11 +32,14 @@
             <option value="120">120 - medium format</option>
             <option value="135">135 - 35mm film</option>
           </select>
-        <br><label>sort by</label> 
+        </section>
+        <section>
+          <label>sort by</label> 
           <button v-on:click="sort" v-bind:class="[ sortBy === 'popularity' ? 'active' : '', sortBy === 'popularity' ? sortDir : '' ]">popularity</button>
           <button v-on:click="sort" v-bind:class="[ sortBy === 'name' ? 'active' : '', sortBy === 'name' ? sortDir : '' ]">name</button>
           <button v-on:click="sort" v-bind:class="[ sortBy === 'price' ? 'active' : '', sortBy === 'price' ? sortDir : '' ]">price</button>
           <button v-on:click="sort" v-bind:class="[ sortBy === 'iso' ? 'active' : '', sortBy === 'iso' ? sortDir : '' ]">ISO</button>
+        </section>
       </aside>
       <ul v-cloak>
         <li v-for="film in films">