When viewed on larger screens, such as monitors, the layout functions perfectly. However, on smaller screens like mobile phones, some cards may get cut off.
On larger screens, the cards are displayed in a single row and will adapt to a new line if the screen size decreases:
https://i.sstatic.net/pHEXR.png https://i.sstatic.net/aXXS4.png
On smaller screens, the cards are stacked vertically as they should be. However, some cards become unreachable and are cut off, as shown in the image below:
https://i.sstatic.net/I9fZi.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="height=device-height width=device-width, shrink-to-fit=no">
<script src="scripts/jquery.js"></script>
<script src="scripts/jquery_ui.js"></script>
<script src="scripts/bootstrap.js"></script>
<link rel="stylesheet" href="styles/bootstrap.css">
<title>Overview</title>
</head>
<body>
<div class="d-flex flex-wrap justify-content-center align-content-center align-items-center vw-100 vh-100">
<div class="card m-3">
<div class="card-header text-center">1</div>
<div class="card-body">
<div class="card-text">Text Text Text Text Text Text</div>
<div class="card-text">Text Text Text Text Text Text</div>
<div class="card-text">Text Text Text Text Text Text</div>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-dark">Text</button>
</div>
</div>
<!-- More card elements here -->
</div>
</body>
</html>