How to switch CSS stylesheets (change what the website looks like) based off of browser size

Question

I'm trying to create two versions of my website. One for a phone, or a smaller browsing window on a computer, and one for a large browsing window. I'm trying to do this be liking my HTML to two different style sheets depending on the size of the web browser. I'm not fully sure how to do this. I have a weak attempt in my code, but it only is in regard to the total screen size and doesn't really work. I'm new to programming so if you guys could help, that would be highly appreciated.

// Navigation Bar Underline
$("a").click(function(){
    $("a.active-menu").removeClass("active-menu");
    $(this).addClass("active-menu");
 });

@font-face {
  font-family: 'playfair_displayregular';
  src: url('Fonts/Playfair Display/playfairdisplay-variablefont_wght-webfont.woff2') format('woff2'),
       url('Fonts/Playfair Display/playfairdisplay-variablefont_wght-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'futuralight';
  src: url('Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'),
       url('Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

*{
    margin:0;
    padding:0;
    border:0;
}


.topnav {
    background-color: rgb(84,104,217);
    overflow: hidden;
  }
  
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: relative;
  }

  .topnav a:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom: 3px;
    left: 8%;
    background-color: white;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
  }

 .topnav a:hover:before {
    visibility: visible;
    transform: scaleX(1);
  }
.topnav a.active-menu:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom:3px;
    left: 8%;
    background-color: white;
    visibility: visible;
    transform: scaleX(1);
    transition: all 0.3s ease-in-out 0s; 
    }
  .leftimage{
    width:70%;
    position:absolute;left:0%;
    object-fit: cover;
    width: 69vw;
    height: 100vh;
    height: 400px;
    min-width:560px;
  }
  .bio{
    background-color: rgb(84,104,217);
    position:absolute;right:0%;
    text-align: center;
    width:26%;
    height: 550px;
    top: 47px;
    color: white;
    font-family: 'playfair_displayregular';
    min-width:240px;
    
  }
  .rndface{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 155px;
    margin-top:40px;
    margin-bottom:10px;
  }
.topname{
  padding-top:18px;
  padding-bottom:0px;
  margin-bottom:0px;
  border-bottom:0px;
  white-space: nowrap;
}
.school{
  padding-bottom:12px;
  padding-top:34px;
  font-size:17px;
  font-family: 'futuralight';
}
.interests{
  padding-bottom:12px;
  font-family: 'futuralight';
  font-size:17px;
}
.location{
  padding-bottom:38px;
  font-family: 'futuralight';
  font-size:17px;
}
.mail{
  padding-bottom:12px;
  font-family: 'futuralight';
  font-size:17px;
}
.num{
  padding-bottom:24px;
  font-family: 'futuralight';
  font-size:17px;
}

.fa {
  padding-left:10px;
  padding-right:10px;
  padding-top:12px;
  padding-bottom:12px;
  font-size: 30px;
  text-align: center;
  text-decoration: none;
}
.fa:hover {
  opacity: 0.7;
}
.fa-instagram {
  color: white;
}
.fa-linkedin {
  color: white;
}
.section1{
  position: relative;
  text-align: center;
  color:white;
}
.HelloIm {
  position: absolute;
  top: 160px;
  left: 4%;
  font-size: 40px;
}
.romf {
  position: absolute;
  top: 200px;
  left: 4%;
  font-size: 65px;
}
.aboutfront{
  background-color: lightblue;
  position:relative; 
  top:600px;
  height: 300px;
}
.abt{
  position:relative; 
  top:48px;
  left: 6%;
  font-size: 28px;
  font-style: italic;
}
.myback{
  position:relative; 
  top:60px;
  left: 6%;
  font-size: 18px;
}
.abtme{
  position: absolute; 
  top:140px;
  left: 6%;
  right:6%;
  font-size: 18px;
  word-wrap: break-word;
}
.footer{
  position:relative;
  background-color:black;
  height:30px;
  top:300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <script src="jquery-3.5.1.min.js"></script>
  <script src='script.js'></script>
  <link rel="stylesheet" type="text/css" media="only screen and (min-width: 1036px)" href="style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    dkin
  </title>
</head>

<body>
  <header class="topnav" id="topnav">
    <a class="active-menu" href="index.html">Home</a>
    <a class="link" href="#news">DontUse</a>
    <a class="link" href="#contact">DontUse</a>
    <a class="link" href="about.html">About</a>
  </header>
  <div class='section1'>
    <img class= 'leftimage' src="https://www.topuniversities.com/sites/default/files/styles/lead_article_image/public/blogs/lead-images/engineering_imagery.jpg" alt="ADDALT">
    <div class='HelloIm'>Hello, I'm</div>>
    <div class='romf'>Rsdfadkin.</div>>
  </div>
  <div class='bio'>
      <img class = 'rndface' src="rndface.png" alt="Missing File">
      <p class='topname'>
        <h1>Rdkin.</h1>
      </p>
      <p class='school'>
        Negh School
      </p>
      <p class='interests'>
        EnginScience
      </p>
      <p class='location'>
        Chicaois
      </p>
      <p class='mail'>
        framail.com
      </p>
      <p class='num'>
        (845504
      </p>
      <p>
        <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/rokin-a3a9541a5/" class="fa fa-linkedin"></a>
        <a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/rdkin/" class="fa fa-instagram"></a>
      </p>
      <p>
    </div>
    <div class='aboutfront'>
          <h2 class='abt'>
            About
          </h2>
          <p class='myback'>
            MY BACKGROUND
          </p>
          <p class='abtme'>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem deserunt, aperiam consequuntur 
            beatae molestias eaque repudiandae nulla error veritatis 
            illo? Deleniti necessitatibus magni, maxime asperiores veniam laborum quisquam placeat. Deleniti?
          </p>
    </div>
    <footer class='footer'>
      <p>
        © 2020 By Rodsfadkin.
      </p>
    </footer>
  </body>
</html>

I believe what you are looking for is media query breakpoints in your css, this allows you to redefine css classes based on screen width using one stylesheet. — plum 0, May 22 '20 at 21:40

ikenas · Accepted Answer · 2020-05-22T21:48:04.077

3

Use @media tag in the same script, example:

Using this tag is the correct way of doing it !!

@media only screen and (max-width: 600px) {
   body {
      background-color: lightblue;
   }
}

This will change the body of the page if the size is smaller than 600px

And if the main CSS file is in this link

<link rel="stylesheet" type="text/css" media="only screen and (min-width: 1036px)" href="style.css" />

Change it to this

<link rel="stylesheet" type="text/css"  href="style.css" />

edited May 22 '20 at 21:48

answered May 22 '20 at 21:45

ikenas

411
3
11

Just to clarify, you use this in the CSS code? – May 22 '20 at 21:47
@rf19 Yes the media query is supposed to be used in your .css file for your stylesheet. – plum 0 May 22 '20 at 21:51

plum 0 · Answer 2 · 2020-05-22T21:53:15.427

What you are looking for is the use of media queries inside of your stylesheet. At the bottom of the CSS file is a breakpoint for smaller screens with max-width of 600 px. All css classes can be rewritten and formatted inside of the query. In the code snippet I have decided to set the body element to have a different background color.

// Navigation Bar Underline
$("a").click(function(){
    $("a.active-menu").removeClass("active-menu");
    $(this).addClass("active-menu");
 });

@font-face {
  font-family: 'playfair_displayregular';
  src: url('Fonts/Playfair Display/playfairdisplay-variablefont_wght-webfont.woff2') format('woff2'),
       url('Fonts/Playfair Display/playfairdisplay-variablefont_wght-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'futuralight';
  src: url('Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'),
       url('Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

*{
    margin:0;
    padding:0;
    border:0;
}


.topnav {
    background-color: rgb(84,104,217);
    overflow: hidden;
  }
  
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: relative;
  }

  .topnav a:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom: 3px;
    left: 8%;
    background-color: white;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
  }

 .topnav a:hover:before {
    visibility: visible;
    transform: scaleX(1);
  }
.topnav a.active-menu:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom:3px;
    left: 8%;
    background-color: white;
    visibility: visible;
    transform: scaleX(1);
    transition: all 0.3s ease-in-out 0s; 
    }
  .leftimage{
    width:70%;
    position:absolute;left:0%;
    object-fit: cover;
    width: 69vw;
    height: 100vh;
    height: 400px;
    min-width:560px;
  }
  .bio{
    background-color: rgb(84,104,217);
    position:absolute;right:0%;
    text-align: center;
    width:26%;
    height: 550px;
    top: 47px;
    color: white;
    font-family: 'playfair_displayregular';
    min-width:240px;
    
  }
  .rndface{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 155px;
    margin-top:40px;
    margin-bottom:10px;
  }
.topname{
  padding-top:18px;
  padding-bottom:0px;
  margin-bottom:0px;
  border-bottom:0px;
  white-space: nowrap;
}
.school{
  padding-bottom:12px;
  padding-top:34px;
  font-size:17px;
  font-family: 'futuralight';
}
.interests{
  padding-bottom:12px;
  font-family: 'futuralight';
  font-size:17px;
}
.location{
  padding-bottom:38px;
  font-family: 'futuralight';
  font-size:17px;
}
.mail{
  padding-bottom:12px;
  font-family: 'futuralight';
  font-size:17px;
}
.num{
  padding-bottom:24px;
  font-family: 'futuralight';
  font-size:17px;
}

.fa {
  padding-left:10px;
  padding-right:10px;
  padding-top:12px;
  padding-bottom:12px;
  font-size: 30px;
  text-align: center;
  text-decoration: none;
}
.fa:hover {
  opacity: 0.7;
}
.fa-instagram {
  color: white;
}
.fa-linkedin {
  color: white;
}
.section1{
  position: relative;
  text-align: center;
  color:white;
}
.HelloIm {
  position: absolute;
  top: 160px;
  left: 4%;
  font-size: 40px;
}
.romf {
  position: absolute;
  top: 200px;
  left: 4%;
  font-size: 65px;
}
.aboutfront{
  background-color: lightblue;
  position:relative; 
  top:600px;
  height: 300px;
}
.abt{
  position:relative; 
  top:48px;
  left: 6%;
  font-size: 28px;
  font-style: italic;
}
.myback{
  position:relative; 
  top:60px;
  left: 6%;
  font-size: 18px;
}
.abtme{
  position: absolute; 
  top:140px;
  left: 6%;
  right:6%;
  font-size: 18px;
  word-wrap: break-word;
}
.footer{
  position:relative;
  background-color:black;
  height:30px;
  top:300px;
}
@media only screen and (max-width: 600px) {
  body {
    background-color: #FFA07A;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <script src="jquery-3.5.1.min.js"></script>
  <script src='script.js'></script>
  <link rel="stylesheet" type="text/css" media="only screen and (min-width: 1036px)" href="style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    dkin
  </title>
</head>

<body>
  <header class="topnav" id="topnav">
    <a class="active-menu" href="index.html">Home</a>
    <a class="link" href="#news">DontUse</a>
    <a class="link" href="#contact">DontUse</a>
    <a class="link" href="about.html">About</a>
  </header>
  <div class='section1'>
    <img class= 'leftimage' src="https://www.topuniversities.com/sites/default/files/styles/lead_article_image/public/blogs/lead-images/engineering_imagery.jpg" alt="ADDALT">
    <div class='HelloIm'>Hello, I'm</div>>
    <div class='romf'>Rsdfadkin.</div>>
  </div>
  <div class='bio'>
      <img class = 'rndface' src="rndface.png" alt="Missing File">
      <p class='topname'>
        <h1>Rdkin.</h1>
      </p>
      <p class='school'>
        Negh School
      </p>
      <p class='interests'>
        EnginScience
      </p>
      <p class='location'>
        Chicaois
      </p>
      <p class='mail'>
        framail.com
      </p>
      <p class='num'>
        (845504
      </p>
      <p>
        <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/rokin-a3a9541a5/" class="fa fa-linkedin"></a>
        <a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/rdkin/" class="fa fa-instagram"></a>
      </p>
      <p>
    </div>
    <div class='aboutfront'>
          <h2 class='abt'>
            About
          </h2>
          <p class='myback'>
            MY BACKGROUND
          </p>
          <p class='abtme'>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem deserunt, aperiam consequuntur 
            beatae molestias eaque repudiandae nulla error veritatis 
            illo? Deleniti necessitatibus magni, maxime asperiores veniam laborum quisquam placeat. Deleniti?
          </p>
    </div>
    <footer class='footer'>
      <p>
        © 2020 By Rodsfadkin.
      </p>
    </footer>
  </body>
</html>

How to switch CSS stylesheets (change what the website looks like) based off of browser size

2 Answers2