Can someone assist in adjusting this Bootstrap 5 code to perfectly fill the entire screen of all 16:9 devices (mobile and desktop/1080p/2160p using Chrome browser) with 100% width and height? The goal is to eliminate horizontal and vertical scrolling. Despite reviewing over 100 examples and tutorials, a suitable solution has not been found yet. All images maintain a 16:9 aspect ratio.
Even on a 1920p width landscape mobile screen, there may still be a slight need to scroll about 5% to the right and down. However, it's mostly just empty space without any critical content.
Preferred layout: the first row occupies approximately 40% of the total height, while the second row takes up the remaining 60% to accommodate 5 columns of equal size. The image in the first column should utilize the entire 40% height allocated to that row.
Desired layout:
------------------------------------------------------
- -
- big-img-big-img -
- big-img-big-img have a nice day -
- big-img-big-img -
- big-img-big-img -
- big-img-big-img -
- big-img-big-img -
------------------------------------------------------
- -
- img-img img-img img-img img-img img-img -
- img-img img-img img-img img-img img-img -
- img-img img-img img-img img-img img-img -
- text text text text text -
- -
------------------------------------------------------
The provided source code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>a</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div class="d-flex flex-column vw-100 vh-100">
<div class="row justify-content-center row-cols-1">
<div class="card mb-4 justify-content-center" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-4"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/128...
...
</div>
</div>
</div>
<div class="row d-flex justify-content-center row-cols-5">
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="card mb-3" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/128...
...
</div>
...
</body>
</html>
Ideally, achieving a setup where the 5 columns occupy 100% width without any horizontal scrolling would greatly improve the user experience. Any assistance in accomplishing this seamless display without the need for additional scrolling would be highly appreciated. While the current design is responsive, there may be room for further refinement. Thank you!