Problem with bootstrap on mobile

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;
}

I would first suggest you add the viewport meta tag to the head element.

For the video CSS, you can also try something like the CSS in the wrapper class in this Codepen. Just know the actual video you use looks to be in a 4:3 aspect ratio, not 16:9 (but the player is).

1 Like

Yeah I totaly forgot about viewport… It’s working now, thank you :laughing: