I am new to frontend dev. When I reduce the browser window size the layout breaks. Elements overlap each other and height of section changes etc. Here is my HTML code in which I have made a navbar and a section in which I created 3 items.
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Lobster&family=Varela+Round&display=swap');
* {
margin: 0;
padding: 0;
}
ul li {
list-style-type: none;
text-decoration: none;
}
#navbar {
display: flex;
align-items: center;
position: relative;
top: 0;
/* justify-content: center; */
}
#navbar::before {
content: "";
background-color: black;
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
opacity: 0.4;
}
/* Logo */
#logo {
margin: 10px 34px;
}
/* Logo and Image */
#logo img {
margin: 3px 6px;
height: 56px;
}
#navbar ul {
display: flex;
font-size: 1.3rem;
}
#navbar ul li a {
text-decoration: none;
display: block;
padding: 3px 23px;
border-radius: 20px;
color: white;
}
#navbar ul li a:hover {
background-color: white;
color: black;
}
/* Home section */
#home {
display: flex;
flex-direction: column;
padding: 3px 200px;
height: 278px;
justify-content: center;
align-items: center;
font-family: 'Lobster', cursive;
}
#home::before {
content: "";
background: url('../bg1.jpg') no-repeat center center/cover;
position: absolute;
height: 56%;
width: 100%;
z-index: -1;
opacity: 0.89;
top: 0px;
left: 0px;
}
#home h1 {
color: white;
text-align: center;
}
#home p {
color: white;
text-align: center;
font-size: 1.5rem;
}
.h-primary {
font-size: 3.8rem;
padding: 12px;
font-family: 'Varela Round', sans-serif;
}
.h-secondary {
font-size: 2.2rem;
padding: 12px;
font-family: 'Varela Round', sans-serif;
}
.h-tertiary {
font-size: 0.9rem;
padding: 12px;
font-family: 'Varela Round', sans-serif;
}
#services {
margin: 110px 0;
margin-left: 20px;
margin-right: 20px;
display: flex;
}
#services .box {
border: 2px solid brown;
padding: 20px;
margin: 3px 6px;
border-radius: 20px;
background-color: rgb(236, 229, 229);
}
#services .box img {
display: block;
height: 171px;
margin: auto;
}
.btn {
padding: 6px 20px;
border: 2px solid white;
background-color: brown;
color: white;
margin: 17px;
font-size: 1.5rem;
border-radius: 10px;
cursor: pointer;
}
.center {
text-align: center;
}
<nav id="navbar">
<div id="logo">
<img src="logo.png" alt="">
</div>
<ul>
<li class="items"><a href="#">Home</a></li>
<li class="items"><a href="#">Service</a></li>
<li class="items"><a href="#">About</a></li>
<li class="items"><a href="#">Contact</a></li>
</ul>
</nav>
<section id="home">
<h1 class="h-primary">Welcome to Myonline meal</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem aperiam quaerat cumque consequatur quasi
</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis consequatur </p>
<button class="btn">Order Now</button>
</section>
<section class="services-container">
<h1 class="h-primary center">Our Service</h1>
<div id="services">
<div class="box">
<img src="img/1.png" alt="">
<h2 class="h-secondary center">Food Ordering</h2>
<p class="center h-tertiary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium quia atque, corrupti</p>
</div>
<div class="box">
<img src="img/2.png" alt="">
<h2 class="h-secondary center">Food Ordering</h2>
<p class="center h-tertiary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium quia atque, corruptir</p>
</div>
<div class="box">
<img src="img/3.png" alt="">
<h2 class="h-secondary center">Food Ordering</h2>
<p class="center h-tertiary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium quia atque, corruptir</p>
</div>
</div>
</section>
1. Media-queries
2.flex-box / grid / bootstrap layout
3.responsive units
.