For the about page of my website, I have a grid layout consisting of three columns. The challenge is to offset the center column by 50%. When the window size is reduced beyond a certain point, I want the third column to disappear and its images to be distributed across the remaining two columns while maintaining the 50% offset on the center column.
Here is how my current layout appears:
https://i.sstatic.net/Z4R9Q6Bm.pngThe second column features pictures with text overlaid for name and job descriptions.
When the window is resized below a specific threshold, I envision the layout transforming into this configuration:
https://i.sstatic.net/pZMsbFfg.pngUnfortunately, at present, when the window shrinks past that particular point, the layout breaks down, causing image overlaps and misalignment.
I am currently utilizing bootstrap 5.3.3
Below is an excerpt of my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
.widthSettingImage{
width: 30%;
height: fit-content;
min-width: 180px;
}
.bottom-left {
position: absolute;
bottom: 16px;
left: 16px;
}
.bottom-left.fs-6{
position: absolute;
bottom: 0px;
left: 16px;
}
</script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b1bcbca7a0a7a1b2a393e6fde0fde0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55373a3a21262127342515607b667b66">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</head>
<body>
<div class="widthSettingImage float-start position-relative text-light m-2" style="box-shadow: 0px 0px 5px 0px;">
<img src="https://recipe4success.org/workarea/placeholder-image.gif" alt="E"
class="image-thumnail img-fluid rounded-4" style="opacity: 0.9;">
<div class="bottom-left fs-5 fw-semibold">Example Name</div>
<div class="bottom-left fs-6">Software Engineer</div>
</div>
<div class="widthSettingImage float-start position-relative text-light m-2" style=" transform:translateY(50%); box-shadow: 0px 0px 5px 0px;">
<img src="https://recipe4success.org/workarea/placeholder-image.gif" alt="E"
class="image-thumnail img-fluid rounded-4" style="opacity: 0.9;">
<div class="bottom-left fs-5 fw-semibold">Example Name</div>
<div class="bottom-left fs-6">Software Engineer</div>
</div>
(...rest of the original code...)
<div class="widthSettingImage float-end position-relative text-light m-2" style="box-shadow: 0px 0px 5px 0px;">
<img src="https://recipe4success.org/workarea/placeholder-image.gif" alt="E"
class="image-thumnail img-fluid rounded-4" style="opacity: 0.9;">
<div class="bottom-left fs-5 fw-semibold">Example Name</div>
<div class="bottom-left fs-6">Software Engineer</div>
</div>
</html>
I'm struggling with implementing this feature as per the desired specifications.