This is how it looks on PC:
And this is how it looks on PC but resized to mobile screen size:
But when I open the page on my mobile, this is how it looks like:
It’s so ugly and not responsive, I expected it to look like a screen on PC resized (photo 2)
Why is this happening?
I tried with changing container to container-fluid, but h1 text still small like on photo 3
index.html
<!DOCTYPE html>
<html lang="sr" dir="ltr">
<head>
<meta charset="utf-8">
<title>What is Lorem Ipsum?</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<h1>What is Lorem Ipsum?</h1>
<h4>Lorem Ipsum is simply dummy text</h4>
<div class="upustvo">
<p>It is a long established fact that a reader will be <span class="green">distracted</span> by the readable content of a page when looking at its layout</p>
</div>
<div class="lajv">
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
style.css
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
body {
background-color: #0d1221;
font-family: 'Roboto', sans-serif;
}
h1 {
text-align: center;
color:white;
padding:50px 0px 10px 0px;
}
h4 {
text-align: center;
color: #727b93;
padding-bottom: 20px;
}
p {
color: white;
}
.green {
color:#51ded2;
}
.lajv {
height: 100%;
}
.embed-responsive {
width: 100%;
height: 100%;
min-height: 45vh;
}
