I have a grid of divs for my website’s about page with three columns, and the center column moved down by 50%.
There are quite a few strange problems, like the margins being different sizes, and the box shadow not showing up, but basically what I want to happen is that the third column is removed when the window is too small, and all the images in it are dumped into the first and second columns, and for the second column to still be offset 50%.
Currently, what happens when the window is too small is that the grid layout just breaks, with overlapping images and misaligned stuff.
I am using bootstrap 5.3.3
Here is my code:
<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/[email protected]/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/[email protected]/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>
<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>
<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>
<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>
</code>
<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/[email protected]/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/[email protected]/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>
<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>
<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>
<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>
</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/[email protected]/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/[email protected]/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>
<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>
<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>
<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 genuinely have no idea how to do this.