Hejka, mam problem i nie umiem dojść na czym on się opiera, w sensie piszę sobie Bootstrapa z odc 1 od Zelenta, ale mam przy małej wielkości tekst zachowuje poprzednią szerokość. Daję screeny dla łatwego zobrazowania (na screenie kod + efekt).
Przy dużej szerokości:
Przy małej szerokości (poniżej 769 zaczyna się problem)
Przy szerokości 477 robi się odstęp od krawędzi okna dziwny, właśnie przez tekst, a pamiętam, że tekst powinien się zachowywać responsywnie z defaultu).
Na filmiku jest używana wersja 4 boostrapa, ja używam v5, czy z tego może to wynikać? W divie containerowym użyłem container-fluid myśląc, że to poprawi sytuację, ale nic się nie zmienia.
Aktualny kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Skoki narciarskie</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Blog o skokach narciarskich">
<meta name="keywords" content="skoki narciarskie, skoczkowie, wyniki">
<meta name="author" content="Jan Kowalski">
<meta http-equiv="X-Ua-Compatible" content="IE=edge">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<main>
<section class="jumpers">
<div class="container-fluid">
<header>
<h1>Poznajmy zawodników</h1>
<p>W tej sekcji specjalnie dla Was prezentujemy sylwetki zawodników, których znamy z rywalizacji w konkursach pucharu świata oraz olimpijskich. Poznaj osiągnięcia, statystyki, a także ciekawostki na temat najbardziej rozpoznawalnych zawodników!</p>
</header>
<div class="row">
<div class="col-sm-6 col-md-4">
<figure>
<a href="#"><img src="img/malysz.jpg" class="img-fluid" alt="Adam Małysz"></a>
<figcaption>Adam Małysz</figcaption>
</figure>
</div>
<div class="col-sm-6 col-md-4">
<figure>
<a href="#"><img src="img/stoch.jpg" class="img-fluid" alt="Kamil Stoch"></a>
<figcaption>Kamil Stoch</figcaption>
</figure>
</div>
<div class="col-sm-6 col-md-4">
<figure>
<a href="#"><img src="img/ahonen.jpg" class="img-fluid" alt="Janne Ahonen"></a>
<figcaption>Janne Ahonen</figcaption>
</figure>
</div>
<div class="col-sm-6 col-md-4">
<figure>
<a href="#"><img src="img/schmitt.jpg" class="img-fluid" alt="Martin Schmitt"></a>
<figcaption>Martin Schmitt</figcaption>
</figure>
</div>
<div class="col-sm-6 col-md-4">
<figure>
<a href="#"><img src="img/kubacki.jpg" class="img-fluid" alt="Dawid Kubacki"></a>
<figcaption>Dawid Kubacki</figcaption>
</figure>
</div>
<div class="col-sm-6 col-md-4">
<figure>
<a href="#"><img src="img/zyla.jpg" class="img-fluid" alt="Piotr Żyła"></a>
<figcaption>Piotr Żyła</figcaption>
</figure>
</div>
<div class="col-sm-6 col-md-4">
<figure>
<a href="#"><img src="img/kranjec.jpg" class="img-fluid" alt="Robert Kranjec"></a>
<figcaption>Robert Kranjec</figcaption>
</figure>
</div>
<div class="col-sm-6 col-md-4">
<figure>
<a href="#"><img src="img/schlierenzauer.jpg" class="img-fluid" alt="Gregor Schlierenzauer"></a>
<figcaption>Gregor Schlierenzauer</figcaption>
</figure>
</div>
<div class="col-sm-6 col-md-4">
<figure>
<a href="#"><img src="img/kot.jpg" class="img-fluid" alt="Maciej Kot"></a>
<figcaption>Maciej Kot</figcaption>
</figure>
</div>
<div class="col-sm-6 col-md-4">
<figure>
<a href="#"><img src="img/kraft.jpg" class="img-fluid" alt="Stefan Kraft"></a>
<figcaption>Stefan Kraft</figcaption>
</figure>
</div>
<div class="col-sm-6 col-md-4">
<figure>
<a href="#"><img src="img/ammann.jpg" class="img-fluid" alt="Simon Ammann"></a>
<figcaption>Simon Ammann</figcaption>
</figure>
</div>
<div class="col-sm-6 col-md-4">
<figure>
<a href="#"><img src="img/kasai.jpg" class="img-fluid" alt="Noriaki Kasai"></a>
<figcaption>Noriaki Kasai</figcaption>
</figure>
</div>
</div>
</div>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>
</body>
</html>
CSS:
body
{
background-color: #2F3336;
color: #efefef;
font-family: 'Open Sans', sans-serif;
font-size: 17px;
}
h1
{
font-size: 36px;
font-weight: 400;
color: #C0D06F;
margin: 20px;
}
.jumpers
{
text-align: center;
padding: 0;
}
.jumpers p{
overflow-wrap: break-word;
margin-bottom: 300px;
}
.jumpers figcaption {
margin-top: 99px;
}
