mobile style

497-fall2018 · Nov 14, 2018 · f716770 · f716770
1 parent e91cf10
commit f716770
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 11 deletions.
diff --git a/src/App.css b/src/App.css
@@ -51,6 +51,11 @@
   min-height: 100vh;
   background-color:rgba(0, 0, 0, 0.7);;
 }
+.wrappad{
+  padding: 130px 110px 0 110px;
+}
+
+
 
 .iframe{
   overflow: hidden;
@@ -61,7 +66,24 @@
   /* border: 1px solid white; */
 
 }
+@media all and (max-width: 840px) {
+  .wrappad{
+    padding: 12rem 3rem 0 3rem;
+  }
+  h2{
+    font-size: 4.5rem !important;
+  }
 
+  h5{
+    font-size: 1.2rem !important;
+  }
+  .iframe{
+    height: 200px;
+  }
+  .SpotifyPlayer{
+    height: 200px;
+  }
+}
 .platformIcon:hover, .spIcon:hover {
   cursor:pointer;
 }

diff --git a/src/App.js b/src/App.js
@@ -206,18 +206,12 @@ class App extends Component {
           <section className='add-item'>
             <form id="form" action="#" onSubmit={this.handleSubmit} >
               <div id="prefetch">
-                <div style={{
-                  paddingTop: 130,
-                  paddingLeft: 100,
-                  paddingRight: 100
-                }}>
+                <div className="wrappad">
                   <Grid
                     container
                     direction="column"
-
                   >
-
-                    <Typography align='left' color='inherit' component="h2" variant="h1" gutterBottom>
+                    <Typography align='left' color='inherit' component="h2" variant="h1" gutterBottom className="headertext">
                       DJ Produ
                     </Typography>
                     <Typography align='left' color='inherit' variant="h5" gutterBottom>
@@ -291,16 +285,16 @@ class App extends Component {
             </div>
 
             <div id="NUdiv">
-              <iframe width="100%" height="100%" scrolling="no" frameBorder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/315636479&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
+              <iframe className="iframe" scrolling="no" frameBorder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/315636479&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
             </div>
 
             <div id="soundclouddiv">
-              <iframe width="100%" height="100%" scrolling="no" frameBorder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/281743188&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
+              <iframe className="iframe" scrolling="no" frameBorder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/281743188&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
             </div>
 
 
             <div id="youtubediv">
-              <iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLw-VjHDlEOgvtnnnqWlTqByAtC7tXBg6D" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+              <iframe className="iframe" src="https://www.youtube.com/embed/videoseries?list=PLw-VjHDlEOgvtnnnqWlTqByAtC7tXBg6D" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
 
 
           </div>