Currently, I am immersed in creating a compact set of HTML CSS codes to exhibit two overlapped contents (images) next to each other in a single row. My goal is to stack them vertically when the width is reduced for mobile display. Despite implementing the following HTML and CSS codes, I am unable to achieve the desired outcome.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test HTML CSS Basic</title>
<!-- Bootstrap 5.1.0 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5944544f494f45514651454746485b6f48504d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="styles.css">
<!-- Bootstrap Script -->
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
</head>
<body>
<main class="container my-4" role="main">
<div class="row text-center cc-title-block">
<div class="col">
<h1 class="head-title">Exploring the Overlap of Two Contents</h1>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="cc-iat">
<div class="cc-iat-image">
<a href="https://www.google.com" class="d-block">
<picture>
<img src="img/spacex-launch.jpg" alt="" style="width:100%; height: auto;">
</picture>
</a>
</div>
<div class="cc-iat-image-content">
<h3 class="cc-iat-title">Self Landing Rocket</h3>
<p class="cc-iat-text">
"Possibly the most amazing thing ever! We can customize this for you."
</p>
<a href="https://www.google.com" class="btn btn-light btn-lg"
style="padding-left: 3rem; padding-right: 3rem;">
More Details
</a>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
main {
display: block;
}
.my-4 {
margin-bottom: 4.5rem !important;
margin-top: 4.5rem !important;
}
.container {
width: 100%;
padding-right: 17.5px;
padding-left: 17.5px;
margin-right: auto;
margin-left: auto;
}
.row {
display: flex;
margin-right: 17.5px;
margin-left: 17.5px;
}
/* @media (min-width: 576px) */
.col-sm-12 {
flex: 0 0 100%;
max-width: 100%;
position: relative;
width: 100%;
padding-right: 17.5px;
padding-left: 17.5px;
}
.text-center {
text-align: center !important;
}
.cc-title-block {
margin-top: 115px;
margin-bottom: 115px;
}
.head-title {
font-family: proxima-nova, sans-serif;
font-size: 30px;
font-weight: 300;
line-height: 1.33;
color: #000;
text-align: center;
}
.justify-content-center {
justify-content: center !important;
}
.cc-iat {
position: relative;
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: flex-end;
margin-bottom: 100px;
}
.cc-iat-image {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 65%;
width: 65%;
min-width: 65%;
}
.d-block {
display: block !important;
}
a, a:hover {
text-decoration: none;
}
.cc-iat-image-content {
flex-basis: 42%;
flex-shrink: 0;
flex-grow: 0;
width: 42%;
padding: 50px;
color: #fff;
position: relative;
left: -140px;
bottom: -70px;
background-image: url('img/image-bg.png');
}
.cc-iat-title {
font-family: proxima-nova, sans-serif;
font-style: normal;
font-weight: 800;
font-size: 34px;
}
.cc-iat-text {
font-weight: 300;
font-size: 21px;
line-height: 1.43;
font-family: proxima-nova, sans-serif;
font-style: normal;
}
.btn {
text-transform: uppercase;
}
I utilized Bootstrap and designated my parent style as "flex-wrap: wrap;" while also establishing meta properties in the HTML head. The page appears like this at maximum width: https://i.sstatic.net/kAh08Nb8.jpg When narrowing the width, the "Self Landing Rocket" content should transition below the Rocket images for responsive viewing. However, I seem to be missing something crucial. Any insights on what might be causing this issue would be greatly appreciated. Thank you!
My expectation is that the flexbox items will appear stacked on top of each other when viewed on a mobile device.