Why are my heading elements overlapping on small screens? - html

Question

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">Home</li>
<li class="items">Service</li>
<li class="items">About</li>
<li class="items">Contact</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>

Answer 1

You should learn about responsiveness, when you make a website, it usually looks different on different screen sizes and devices, and in order to make it look better on smaller screens, you need to style your page differently according to the device's size, for example using media queries.
In your case you mostly use px unit to set sizes for margins, paddings and such in your css, but there are better units that are described as relative, such as %, em and rem.
You can learn more about all this just googling or watching tutorials, but in short, percentage unit is relative to the parent's size, em is relative to this element's font-size, and rem is relative to the root font-size (html tag) which is usually 16px, so for example if you set a font-size on a div of 3rem, that would mean 3 * 16px, which is 48px, but the difference between saying 3rem and just 48px, is that in some cases 3rem might become smaller or larger depending on the device or any other factor.
div {
display: flex;
flex-direction: column;
align-items: start;
margin: 1em 0;
}
.small button {
font-size: 16px;
}
.big button {
font-size: 48px;
}
.non-relative {
padding: 8px 16px;
}
.relative {
padding: 0.5em 1em;
}
<div class="small">
<button class="non-relative">Non-Relative</button>
<button class="relative">Relative</button>
</div>
<div class="big">
<button class="non-relative">Non-Relative</button>
<button class="relative">Relative</button>
</div>
Here you can see that, when I set the button's padding with px, it stays the same no matter the font size, but with the em unit, it will be relative to it, so proportionally it will be the same as the smaller version. Hope this is a good enough example, I am kind of sleepy and might've missed something, but hope this helps you!