Updated layout for all screen sizes

prosjekt2/src/App.css

@@ -5,6 +5,7 @@ body{
   background-color: mediumslateblue;
   display: flex;
   justify-content: center;
+  overflow-y: scroll;
 }
 
 button{
@@ -13,10 +14,9 @@ button{
   padding: 0.5vw 1vw;
   margin: 0.1vw;
   margin-left: 1vw;
-  font-size: 1.2vw;
+  font-size: 14px;
   font-weight: bold;
   background-color: #8fa0c9;
-  width: 80%;
 }
 
 button:hover{
@@ -29,35 +29,23 @@ h4{
 }
 
 input[type=radio]{
-  width: 1vw;
-  height: 1vw;
+  width: 13px;
+  height: 13px;
 }
 
 q{
   text-align: center;
 }
 
-/* Inspiration to footer from https://www.w3schools.com/howto/howto_css_fixed_footer.asp */
-.footer { 
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  background-color: #0f106d;
-  display: flex;
-  justify-content: center;
-}
-
 .box{
-  background: #61dafb;
   margin: 1vw;
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 2px;
 }
 
 .container{
-  background-color: #282c34;
   display: flex;
   justify-content: space-evenly;
   flex-wrap: nowrap;
@@ -89,9 +77,20 @@ q{
   background-color: rgba(200,200,200,0.8);
 }
 
+/* Inspiration to footer from https://www.w3schools.com/howto/howto_css_fixed_footer.asp */
+.footer { 
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: #0f106d;
+  display: flex;
+  justify-content: center;
+}
+
 .header { 
   font-weight: bold;
-  font-size: 3.5vw;
+  font-size: 30px;
   color: white;
   position: fixed;
   right: 0;
@@ -99,18 +98,20 @@ q{
   z-index: 999;
   background-color: #0f106d; 
   text-align: center;
-  padding-top: 0.5vw;
-  padding-bottom: 0.5vw;
+  padding-top: 5px;
+  padding-bottom: 5px;
 }
 
 .image{
-  width: 45vw;
+  width: 44vw;
   height: 35vw;
 }
 
 .main{
   width: 80vw;
-  height: 100vh;
+  padding-bottom: 3vw;
+  padding-top: 3vw;
+  border: solid;
 }
 
 .navDots{
@@ -139,7 +140,7 @@ q{
 .screenBox{
   display: flex;
   flex-wrap: nowrap;
-  padding-top: 5.6vw;
+  padding-top: 55px;
 }
 
 .sidebar {
@@ -147,15 +148,15 @@ q{
   width: 14vw;
   padding-left: 1vw;
   padding-right: 1vw;
-  padding-top: 3vw;
 }
 
 .sidebarButtons{
-  width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .sidebarCollection{
-  font-size: 1.3vw;
+  font-size: 15px;
   padding-bottom: 1vw;
 }
 
@@ -176,63 +177,52 @@ q{
 
 .text{
   width: 25vw;
-  height: 32vw;
   flex-direction: column;
-  font-size: 1.5vw;
+  font-size: 16px;
+  border: #16199b dotted;
 }
 
 
 /* Source of sizes: https://www.w3schools.com/css/css_rwd_mediaqueries.asp */
 /* Large devices (laptops/desktops, between 992px and 1200px) */
 @media only screen and (max-width: 1200px) {
-  .container{
-    background-color: chartreuse;
+  .image{
+    width: 43vw;
   }
 }
 
 /* Medium devices (landscape tablets, between 768px and 992px) */
 @media only screen and (max-width: 992px) {
-  button{
-    font-size: 1.4vw;
-  }
-  
-  .container{
-    background-color: blueviolet;
-  }
-
-  .header{
-    font-size: 4.2vw;
-  }
-
-  .sidebarCollection{
-    font-size: 1.8vw;
-  }
-
-  .text{
-    font-size: 2vw;
-  }
+  .image{
+    width: 42vw;
+  } 
 }
 
 /* Small devices (portrait tablets and large phones, between 600px and 768px) */
 @media only screen and (max-width: 768px) {
+  body{
+    overflow-y: unset;
+  }
+
   button{
-    font-size: 1.9vw;
+    font-size: 13px;
     width: 20vw;
+    margin-bottom: 1vw;
   }
 
   input[type=radio]{
-    width: 1.4vw;
-    height: 1.4vw;
-  }
-  
-  .container{
-    background-color: blue;
+    width: 11px;
+    height: 11px;
   }
 
   .dot{
-    width: 4vw;
-    height: 4vw;
-    margin: 1vw;
+    width: 23px;
+    height: 23px;
+    margin: 5px;
+  }
+
+  .header{
+    font-size: 26px;
   }
 
   .image{
@@ -241,7 +231,12 @@ q{
   }
 
   .main{
-    width: 90vw;
+    width: 92vw;
+    margin-top: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    border: none;
+    border-top: solid;
   }
 
   .navDots{
@@ -255,7 +250,7 @@ q{
   }
 
   .radio{
-    width: 30vw;
+    width: 28vw;
     padding-right: 2vw;
   }
 
@@ -265,52 +260,56 @@ q{
 
   .sidebar{
     display: flex;
-    padding-top: 8vw;
+    padding-top: 50px;
   }
 
   .sidebarButtons{
-    display: flex;
+    flex-direction: row;
     justify-content: center;
   }
 
-  .sidebarCollection{
-    font-size: 2.3vw;
-  }
-
   .slideButtonContainer{
     height: 70vh;
   }
 
   .sound{
     width: 80vw;
-    margin-bottom: 8vw;
+    margin-bottom: 43px;
   }
 
   .text{
     width: 80vw;
-    height: 20vh;
-    min-height: 18vw;
-    font-size: 2.5vw;
+    font-size: 15px;
   }
 }
 
-/* Extra small devices (phones, 599px and down) */
+/* Extra small devices (phones, between 300 px and 600px) */
 @media only screen and (max-width: 600px) {
   button{
-    font-size: 2.5vw;
     width: 25vw;
   }
+}
+
+/* Even smaller devices (phones, 410 px and down) */
+@media only screen and (max-width: 410px) {
+  button{
+    font-size: 12px;
+  }
   
-  .container{
-    background-color: aliceblue;
+  .header{
+    font-size: 22px;
   }
 
-  .sidebarCollection{
-    font-size: 3vw;
+  .radio{
+    width: 30vw;
+    padding: 0;
   }
 
-  .text{
-    font-size: 2.5vw;
-    height: 30vh;
+  .sidebar{
+    padding-top: 42px;
+  }
+
+  .sidebarCollection{
+    font-size: 13px;
   }
 }
\ No newline at end of file

prosjekt2/src/components/Footer.jsx

@@ -4,8 +4,7 @@ import NavigationDots from './NavigationDots';
 class Footer extends Component {
       render() {
         return (
-          <div className="footer" id="footer"
-            ref={a => this._acc = a} >
+          <div className="footer" id="footer">
             <NavigationDots goToFirstSlide={this.props.goToFirstSlide}  
                 goToSecondSlide={this.props.goToSecondSlide}  
                 goToThirdSlide={this.props.goToThirdSlide}  

prosjekt2/src/components/Sidebar.jsx

@@ -131,7 +131,6 @@ class Sidebar extends Component {
                     <button onClick={(e) => this.seeCombinationClickHandler(e)}>
                         See combination
                     </button>
-                    <div id="count"></div>
                     <button onClick={(e) => this.saveFav(e)}>
                         Save as favorite
                     </button>