'Responsive Web Design Not working

I'm new to responsive web design, so I'm not sure why this isn't working, but it definitely has something to do with me. I'm not exactly sure how to make this current website "responsive", and I've been trying for a good while. Code shown below. It may help to run it via browser. NOTE: I would like to not use a 3rd party css library like Bootstrap

HTML

    <!doctype html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="icon" href="img/favicon.ico" sizes="16x16" type="image/ico">
<head>
<meta charset="utf-8">
<title>OneClickLearn - Home</title>
</head>

<body>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div class="head">
<center>
  <h1 class="centered-divcontent txt-jumbo">OneClickLearn</h1>
  </center>
</div>

<div class="sidecontentleft">

  <div class="sidecontent">
        <h3 class="txt-marginall">Learn how to construct the blocks of a website!<br><br>Start Learning HTML <em>now</em></h3>
        <button class="green-btn txt-marginall">Learn HTML5!</button>
        </div>
    </div>

<div class="sidecontentleft">

  <div class="sidecontent"><h3>Learn the Cascading Style Sheet of web development!<br><br>Start Learning CSS <em>now</em></h3>
        <button class="blue-btn txt-marginall">Learn CSS!</button>
        </div>
    </div>

<div class="sidecontentleft">

  <div class="sidecontent">
        <h3 class="txt-marginall">Learn data storing in web development!<br><br>Start Learning PHP <em>now</em></h3>
        <button class="green-btn txt-marginall">Learn PHP!</button>
        </div>
    </div>

<div class="sidecontentleft">

  <div class="sidecontent">
    <h3>Create actions and animations!<br>
      <br>
      Start Learning Javascript <em>now</em></h3>
    <button class="blue-btn txt-marginall">Learn Javascript!</button>
        </div>
    </div>
<div class="sidecontentleft">

  <div class="sidecontent">
        <h3 class="txt-marginall">Learn how to construct the blocks of a website!<br><br>Start Learning HTML5 <em>now</em></h3>
        <button class="green-btn txt-marginall">Learn HTML5!</button>
        </div>
    </div>
</body>
</html>

CSS

    @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');

body {
    margin:0;
    padding:0;
    }

/*nav*/
@media (min-width:600px) {
    .txt-jumbo {
        font-size:-40px;
    }
}


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float:left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

/*divs*/

.sidecontentleft {
    align-self:center;
    height:300px;
    width:300px;
    float:left;
    }

.sidecontentright {
    align-self:center;
    height:300px;
    width:300px;
    float:right;
    }

.sidecontent {
    text-align:center;
    height: 300px;
    display: table-cell;
    vertical-align: middle;
    }

.head {
    width:100%;
    height:350px;
    background-color:#05D7C6;
    color:white;
    text-align:center;
    }

.centered-divcontent {
    text-align:center;
    height: 350px;
    display: table-cell;
    vertical-align: middle;
    }


/*buttons*/

.green-btn {
    height:40px;
    width:auto;
    border-radius:5px;
    background-color:#04D43C;
    border:none;
    color:white;
    }

.green-btn:hover {
    height:40px;
    width:auto;
    border-radius:5px;
    background-color:#00F040;
    border:none;
    color:white;
    cursor:pointer;
    }

.blue-btn {
    height:40px;
    width:auto;
    border-radius:5px;
    background-color:#05D7C6;
    border:none;
    color:white;
    }

.blue-btn:hover {
    height:40px;
    width:auto;
    border-radius:5px;
    background-color:#00E9D6;
    border:none;
    color:white;
    cursor:pointer;
    }

.white-btn {
    border-radius:5px;
    height:40px;
    width:auto;
    text-align:center;
    border: #BFBFBF 1px solid;
    text-decoration:none;
    color:black;
    background-color:white;
    }

/*Fonts*/

.txt-jumbo {
    font-size:100px;
    }

.txt-centered {
    text-align:center;
    }

.txt-margin {
    margin-left:25px;
    }

.txt-marginall {
    margin-left:15px;
    margin-right:15px;
    margin-top:15px;
    margin-bottom:15px;
    }

h1 {font-family: 'Source Code Pro', monospace;}
h2 {font-family: 'Source Code Pro', monospace;}
h3 {font-family: 'Source Code Pro', monospace;}
h4 {font-family: 'Source Code Pro', monospace;}
h5{font-family: 'Source Code Pro', monospace;}
h6 {font-family: 'Source Code Pro', monospace;}
a {font-family: 'Source Code Pro', monospace;}
p {font-family: 'Source Code Pro', monospace;}

Your help would be appreciated! Thanks!

Solution 1:^[1]

As much as I can appreciate building responsiveness from the ground up, you'll get a clean, crisp, and simple solution by using Flexbox. For more control, use Bootstrap or Materialize, or another framework. It will also be much quicker. No person in their right mind would frown on going simpler.

Solution 2:^[2]

.txt-jumbo, which styles the header font, has a default value of 100px. The media query you used specified font-size: -40px for screens wider than 600px. font-size cannot take a negative value.

To make the font smaller on small screens, try something like:

@media (max-width: 600px) {
    .txt-jumbo {
        font-size: 50px;
    }
}

where max-width: 600px means that the styles contained apply to screens less than 600px wide.

There are several ways to make the navigation "collapse". To make the links stack, make them inline-block elements and set their widths to 100%.

@media (max-width: 600px) {
    li {
        display: inline-block;
        width: 100%;
    }
}

When using a screen less than 600px wide, the links will now take up the entire width of the screen. display: inline-block allows them to stack.

Solution 3:^[3]

1)For Header I use 2 Media Query Like This :

@media screen and (max-width:803px) {

    .centered-divcontent {
        font-size: 50px;
    }

} 

@media screen and (max-width:415px) {

    .centered-divcontent {
        font-size: 30px;
    }
}

2)For navbar I use % instead of px.Like this :

li {
    margin: 10px 2% 10px 1px;
    //More Code
}

li a {
     padding: 5% 7%;
     //More Code
}

3)For Footer Information Languages,I have changed your code a little bit.

Full Code:

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');

body {
margin:0;
padding:0;
 }

/*nav*/
@media (min-width:600px) {
.txt-jumbo {
    font-size:-40px;
}
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float:left;
margin: 10px 2% 10px 1px;
}

li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 5% 7%;
}

li a:hover {
background-color: #111;
}

.head {
width:100%;
height:350px;
background-color:#05D7C6;
color:white;
text-align:center;
}

.centered-divcontent {
text-align:center;
height: 350px;
display: table-cell;
vertical-align: middle;
width: 100%;
}

.green-btn {
height:40px;
width:auto;
border-radius:5px;
background-color:#04D43C;
border:none;
color:white;
}

.green-btn:hover {
height:40px;
width:auto;
border-radius:5px;
background-color:#00F040;
border:none;
color:white;
cursor:pointer;
}

.blue-btn {
height:40px;
width:auto;
border-radius:5px;
background-color:#05D7C6;
border:none;
color:white;
}

.blue-btn:hover {
height:40px;
width:auto;
border-radius:5px;
background-color:#00E9D6;
border:none;
color:white;
cursor:pointer;
}

.white-btn {
border-radius:5px;
height:40px;
width:auto;
text-align:center;
border: #BFBFBF 1px solid;
text-decoration:none;
color:black;
background-color:white;
}

.txt-jumbo {
font-size:100px;
}

.txt-centered {
text-align:center;
}

.txt-margin {
margin-left:25px;
}

.txt-marginall {
margin-left:15px;
margin-right:15px;
margin-top:15px;
margin-bottom:15px;
}

.con {
margin-top: 10px;
width: 100%;
clear: both;
}  

.content {
padding: 10px;
}

.box {
width: 30%;
text-align: center;
float: left;
box-sizing: border-box;
}
h1 {font-family: 'Source Code Pro', monospace;}
h2 {font-family: 'Source Code Pro', monospace;}
h3 {font-family: 'Source Code Pro', monospace;}
h4 {font-family: 'Source Code Pro', monospace;}
h5{font-family: 'Source Code Pro', monospace;}
h6 {font-family: 'Source Code Pro', monospace;}
a {font-family: 'Source Code Pro', monospace;}
p {font-family: 'Source Code Pro', monospace;}

@media screen and (max-width:803px) {

.centered-divcontent {
	font-size: 50px;
}

} 

@media screen and (max-width:415px) {

.centered-divcontent {
	font-size: 30px;
}

} 

@media screen and (max-width:920px) {

.sidecontentleft {
	width: 50%;
	box-sizing: border-box;
}

} 

@media screen and (max-width:650px) {

.box {
	width: 100%;
	float:none;
	padding: 20px;
}

.content {
	width: 70%;
	margin: auto;
}

}

<ul>
   <li><a href="#home">Home</a></li>
   <li><a href="#news">News</a></li>
   <li><a href="#contact">Contact</a></li>
   <li><a href="#about">About</a></li>
</ul>

<div class="head">
   <center>
  <h1 class="centered-divcontent txt-jumbo">OneClickLearn</h1>
   </center>
</div>

<div class="con">
   <div class="box left">
  <div class="content">
	<h3>Learn how to construct the blocks of a website!</h3>
	<h4>Start Learning HTML <em>now</em></h4>
<button class="green-btn txt-marginall">Learn HTML5!</button>
   </div>
</div>

<div class="box right">
   <div class="content">
  <h3>Learn the Cascading Style Sheet of web development!</h3>
  <h4>Start Learning <em>now</em></h4>
  <button class="blue-btn txt-marginall">Learn CSS!</button>
   </div>
</div>

<div class="box left">
   <div class="content">
  <h3>LLearn data storing in web development!</h3>
  <h4>Start Learning PHP <em>now</em></h4>
  <button class="green-btn txt-marginall">Learn PHP!</button>
   </div>
 </div>
</div>

<div class="con">	
   <div class="box right">
  <div class="content">
     <h3>Create actions and animations!</h3>
     <h4>Start Learning Javascript <em>now</em></h4>
	  <button class="green-btn txt-marginall">Learn JavaScript!</button>
  </div>
</div>

<div class="box left">
   <div class="content">
  <h3>Learn how to construct the blocks of a website!</h3>
  <h4>Start Learning HTML5 <em>now</em></h4>
  <button class="blue-btn txt-marginall">Learn HTML5!</button>
</div>
   </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	parker_codes
Solution 2	Katherine Huang
Solution 3

'Responsive Web Design Not working

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]