I wanna make my text Responsive in CSS but I got Problem - html

Question

I'm using media queries in my codes. I added breakpoint for my header and it worked very well but It doesn't work on my original text.
I thought that I can fix it by changing "pre" tag to "p" but It messed up and destroyed all of spacing on my text
so what do i do?
In my HTML : (main-title is a class of heading and original text is a class for "pre" tag)
In my CSS: my media queries. I tired to do on 768px screen first but it didn't work. same as other resolutions
/* Navbar starts ===============================================================================*/
body{
padding:0px;
margin:0px;
overflow-x: hidden;
}
.container{
width: 100%;
height:78px;
position: relative;
background-color: rgb(39, 44, 52);
z-index: 1;
}
.logo{
position: absolute;
padding:0.6%;
padding-top: 0.2%;
}
.nav-list{
font-family: 'Noto Serif', serif;
position: absolute;
right: 0px;
top: 1%;
display: flex;
padding:1.0%;
z-index: 1;
}
.nav-list a{
margin: 15px;
text-decoration: none;
color: #80e560;
transition: color 400ms ease-in-out;
}
.nav-list a:hover{
color: #a8fbfc;
}
.nav-list ul{
list-style-type: none;
}
.hamburger{
position: relative;
cursor: pointer;
display: none;
-moz-transform-origin: 20px;
-ms-transform-origin: 20px;
-o-transform-origin: 20px;
-webkit-transform-origin: 20px;
transform-origin: 20px;
transition: width 800ms ease-in-out;
transition: height 800ms ease-in-out;
}
.hamburger div{
width: 20px;
height: 2px;
background-color: #80e560;
margin: 3px;
margin-left: 50%;
transition: transform 210ms ease-in-out;
}
.sidemenu{
position: absolute;
right: 0px;
width: 40%;
height: 100%;
width: 20%;
background-color: rgb(39, 44, 52);
transform:translateX(100%);
transition:transform 500ms;
z-index: 1;
}
.side-items{
height:80%;
justify-content:space-between;
position: absolute;
display: flex;
flex-direction: column;
font-family: 'Noto Serif', serif;
align-items : space-between;
}
.side-item{
list-style-type: none;
}
.side-item a{
color: white;
text-decoration: none;
transition: color 500ms ease-in-out;
}
.side-item a:hover{color:#80e560;}
#media screen and (max-width:1500px){
.logo{padding-top: 0.3%;}
}
#media screen and (max-width:768px){
.nav-item{
display: none;
}
.hamburger{
display:inline;
bottom: 12px;
right: 35px;
}
.side-items{
right: 20%;
}
.nav-list{
padding: 40px;
}
.container{
height: 89px;
}
.logo{padding-top: 2%;}
.main-title{font-size: 3vw;}
.Original-text{font-size: 3vw;}
}
#media screen and (max-width:568px){
.hamburger{
right: 50%;
}
.side-items{
right: 20%;
font-size: 12px;
}
.container{
height: 89px;
}
.main-title{
font-size: 4vw;
padding: 0px;
}
}
#media screen and (max-width:280px)
{
.side-items{
right: 9%;
}
.hamburger{
right: 6%;
}
}
/* Navbar Ends ========================================================================*/
.mid-section{
background-image: url(/img/background.jpg);
background-position:center;
background-size:cover;
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
#keyframes colorchange{
0% {
color: rgb(216, 200, 86);
}
45% {
color: rgb(231, 103, 71);
}
50% {
color: rgb(198, 228, 73);
}
65% {
color: rgb(179, 228, 73);
}
73%{
color: rgb(70, 232, 155);
}
85%{
color: rgb(70, 232, 211);
}
100%{
color: rgb(69, 233, 224);
}
}
.main-title{
text-align: left;
padding: 45px;
color: rgb(234, 226, 164);
animation-name:colorchange;
animation-iteration-count: infinite;
animation-duration: 7s;
padding-bottom: 0px;
}
.Original-text{
font-size: 1.8vw;
font-family: 'Sansita Swashed', cursive;
padding-top: 0;
color: gold;
}
<!--Navbar Starts ====================================== -->
<header>
<div class="container">
<nav>
<div class="logo"><img src="/img/logo.png"></div>
<div class="nav-list">
<ul class="nav-item"><li>Home</li></ul>
<ul class="nav-item"><li>Products</li></ul>
<ul class="nav-item"><li>About</li></ul>
<div class="hamburger" onclick="clk()" id="burger">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
</div>
</div>
</nav>
</div>
<div class="sidemenu" id="sdmenu">
<div class="side-items">
<ul class="side-item"><li>Home</li></ul>
<ul class="side-item"><li>Products</li></ul>
<ul class="side-item"><li>About</li></ul>
</div>
</div>
</header>
<script src="/func.js"></script>
<!--Navbar End===========================================-->
<div class="mid-section">
<link href="https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght#600&display=swap" rel="stylesheet">
<h1 class="main-title">Welcome to the Land of Electronics</h1>
<pre class="Original-text">
This Land Will Show the Future! get any Electronics You need
from us!
eveything is ready for you. direct from manufacture
Original components. with 2 years guarantee
so lets go and and explore or world
</pre>
</div>

Answer 1

Well, using vw over standard font-size units is up to you, but I really discourage you from using it in your projects because it will change the size of your element whenever the viewport width changes and depend on which box and element are you working on and how's your HTML markup structure is, it's gonna be act very differently in different situations.
But the actual problem here is with the order of specificity for your styles, due to this fact whatever comes last will overwrite the first so your queries won't work as expected. To get them to work (In this particular case) you can move all of them to the bottom of your styles.
/* Navbar starts ===============================================================================*/
body {
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
.container {
width: 100%;
height: 78px;
position: relative;
background-color: rgb(39, 44, 52);
z-index: 1;
}
.logo {
position: absolute;
padding: 0.6%;
padding-top: 0.2%;
}
.nav-list {
font-family: 'Noto Serif', serif;
position: absolute;
right: 0px;
top: 1%;
display: flex;
padding: 1.0%;
z-index: 1;
}
.nav-list a {
margin: 15px;
text-decoration: none;
color: #80e560;
transition: color 400ms ease-in-out;
}
.nav-list a:hover {
color: #a8fbfc;
}
.nav-list ul {
list-style-type: none;
}
.hamburger {
position: relative;
cursor: pointer;
display: none;
-moz-transform-origin: 20px;
-ms-transform-origin: 20px;
-o-transform-origin: 20px;
-webkit-transform-origin: 20px;
transform-origin: 20px;
transition: width 800ms ease-in-out;
transition: height 800ms ease-in-out;
}
.hamburger div {
width: 20px;
height: 2px;
background-color: #80e560;
margin: 3px;
margin-left: 50%;
transition: transform 210ms ease-in-out;
}
.sidemenu {
position: absolute;
right: 0px;
width: 40%;
height: 100%;
width: 20%;
background-color: rgb(39, 44, 52);
transform: translateX(100%);
transition: transform 500ms;
z-index: 1;
}
.side-items {
height: 80%;
justify-content: space-between;
position: absolute;
display: flex;
flex-direction: column;
font-family: 'Noto Serif', serif;
align-items: space-between;
}
.side-item {
list-style-type: none;
}
.side-item a {
color: white;
text-decoration: none;
transition: color 500ms ease-in-out;
}
.side-item a:hover {
color: #80e560;
}
/* Navbar Ends ========================================================================*/
.mid-section {
background-image: url(/img/background.jpg);
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
#keyframes colorchange {
0% {
color: rgb(216, 200, 86);
}
45% {
color: rgb(231, 103, 71);
}
50% {
color: rgb(198, 228, 73);
}
65% {
color: rgb(179, 228, 73);
}
73% {
color: rgb(70, 232, 155);
}
85% {
color: rgb(70, 232, 211);
}
100% {
color: rgb(69, 233, 224);
}
}
.main-title {
text-align: left;
padding: 45px;
color: rgb(234, 226, 164);
animation-name: colorchange;
animation-iteration-count: infinite;
animation-duration: 7s;
padding-bottom: 0px;
}
.Original-text {
font-size: 1.8vw;
font-family: 'Sansita Swashed', cursive;
padding-top: 0;
color: gold;
}
#media screen and (max-width:1500px) {
.logo {
padding-top: 0.3%;
}
}
#media screen and (max-width:768px) {
.nav-item {
display: none;
}
.hamburger {
display: inline;
bottom: 12px;
right: 35px;
}
.side-items {
right: 20%;
}
.nav-list {
padding: 40px;
}
.container {
height: 89px;
}
.logo {
padding-top: 2%;
}
.main-title {
font-size: 3vw;
}
.Original-text {
font-size: 3vw;
}
}
#media screen and (max-width:568px) {
.hamburger {
right: 50%;
}
.side-items {
right: 20%;
font-size: 12px;
}
.container {
height: 89px;
}
.main-title {
font-size: 4vw;
padding: 0px;
}
}
#media screen and (max-width:280px) {
.side-items {
right: 9%;
}
.hamburger {
right: 6%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital#1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>ElectroLand</title>
</head>
<body>
<!--Navbar Starts ====================================== -->
<header>
<div class="container">
<nav>
<div class="logo"><img src="/img/logo.png"></div>
<div class="nav-list">
<ul class="nav-item">
<li>Home</li>
</ul>
<ul class="nav-item">
<li>Products</li>
</ul>
<ul class="nav-item">
<li>About</li>
</ul>
<div class="hamburger" onclick="clk()" id="burger">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
</div>
</div>
</nav>
</div>
<div class="sidemenu" id="sdmenu">
<div class="side-items">
<ul class="side-item">
<li>Home</li>
</ul>
<ul class="side-item">
<li>Products</li>
</ul>
<ul class="side-item">
<li>About</li>
</ul>
</div>
</div>
</header>
<script src="/func.js"></script>
<!--Navbar End===========================================-->
<div class="mid-section">
<link href="https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght#600&display=swap" rel="stylesheet">
<h1 class="main-title">Welcome to the Land of Electronics</h1>
<pre class="Original-text">
This Land Will Show the Future! get any Electronics You need
from us!
eveything is ready for you. direct from manufacture
Original components. with 2 years guarantee
so lets go and and explore or world
</pre>
</div>
</body>
</html>
Update
Well, since there were some complaints about why we should put redundant code into the answer, I just break it down to just the necessary part of code, which is too short and more readable. 😉
.main-title {
text-align: left;
padding: 45px;
color: rgb(234, 226, 164);
animation-name: colorchange;
animation-iteration-count: infinite;
animation-duration: 7s;
padding-bottom: 0px;
}
.Original-text {
font-size: 1.8vw;
font-family: 'Sansita Swashed', cursive;
padding-top: 0;
color: gold;
}
#media screen and (max-width:768px) {
.main-title {
font-size: 3vw;
}
.Original-text {
font-size: 3vw;
}
}
#media screen and (max-width:568px) {
.main-title {
font-size: 4vw;
padding: 0px;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght#600&display=swap" rel="stylesheet">
<h1 class="main-title">Welcome to the Land of Electronics</h1>
<pre class="Original-text">
This Land Will Show the Future! get any Electronics You need
from us!
eveything is ready for you. direct from manufacture
Original components. with 2 years guarantee
so lets go and and explore or world
</pre>