title: How to change CSS when the screen size changes
body: <p>So I have looked into code for my website that would changes the css and even the html of certain sections of my code when the screen size changes. What I am looking into as a start is when I put my website into split screen on Windows 10, or on a Mac, I want the header "Some Title" to move to the left side of the header section. I hope that this will help me with changing certain aspects of my website when the screen size changes. My code is below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!DOCTYPE html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;Some Title&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%"&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"&gt;
          &lt;link rel = "stylesheet" href="stylesheet.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
      
      &lt;div class="Header" id="myHeader"&gt;
          &lt;a class = "headerLogo"&gt;
              &lt;a href="file:///C:/Noah's%20stuff/Home.html" &gt;&lt;h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
              text-align: center; padding-top: 20px"&gt;Some Title&lt;/h1&gt;&lt;/a&gt;
              &lt;style&gt;
                  a{text-decoration: none;}
                  a:hover{
                      text-decoration:none;
                  }
              &lt;/style&gt;
      
          &lt;/a&gt;
          &lt;div class="socialmedia"&gt;
              &lt;a class = "Facebook"&gt;
                  &lt;a href="https://www.facebook.com/" target="_blank"&gt;&lt;img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"&gt;&lt;/a&gt;
              &lt;/a&gt;
              &lt;a class = "Instagram"&gt;
                  &lt;a href="https://www.instagram.com/"&gt;&lt;img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png"  width="50px" height="50px"&gt;&lt;/a&gt;
              &lt;/a&gt;
              &lt;a class = "Youtube"&gt;
                  &lt;a href="https://www.youtube.com/channel/" target="_blank"&gt;&lt;img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"&gt;&lt;/a&gt;
              &lt;/a&gt;
              &lt;a class = preorder&gt;
                  &lt;button style = "background-color: white;"&gt;Pre-Order&lt;/button&gt;
      
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  My CSS
  
  body {
      margin: 0;
  
  }
  
  .Header {
      position: fixed;
      z-index:1;
      width: 100%;
      height: 70px;
      background-color: black;
      text-align: right;
  }
  .headerLogo {
  
  }
  
  .socialmedia {
      position: fixed;
      right: 100px;
      top: 35px;
      transform: translate(0, -50%);
      display: flex;
      /* add this */
      align-items: center;
      /* add this */
  }
  
  .preorder button {
      background-color: white;
      border: 0;
      height: 35px;
      width: 110px;
      margin-left: 35px;
  }
  
  .footer {
      display: flex;
      align-items: center;
      width: 100%;
      height: 90px;
      background-color: black;
  }
  
  .img-fluid{
      width: inherit;
      height: 782px;
  }
  
  .mySlides~.mySlides {
      position: absolute;
      top: 0;
      left: 100%;
      transition: 0.7s;
  }</code></pre>
  </div>
  </div>
  </p>