Html Question posted in
Some basic documentation can be found here.

Html – How can I make two overlapped flexbox items side by side in one row to have responsive display when I narrow down to mobile display?

I am working on a small HTML CSS codes to display two overlapped contents (pictures) side by side in one row. I aimed to display them one above the other when I narrow down my width to mobile display. I did the following HTML codes and CSS codes but just can not make it work.

<!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/[email protected]/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">Here we can look into the overlap of the 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">
                  "Probably the coolest thing ever! we can program 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 used the Bootstrap and set my parent style as "flex-wrap: wrap;" as well as define meta property in HTML head as . The page in max width looks like this:
enter image description here
When I narrow down my display width, the "Self Landing Rocket" content should go underneath of back Rocket images as responsive display. But right now I can not get it resolved. What did I miss? Thanks in advance.

I am expecting the flexbox items can be displayed one above other one when I use mobile display.

Tags:

2

Answers


  1. 0

    To display side by side,
    Remove position:'relative' from
    .cc-iat-image-content class

    To display one upon other, 1. Give flex-wrap: wrap; in .cc-iat class
    and also 2. Remove position:'relative' from .cc-iat-image-content
    class

    Login or Signup to reply.
  2. 0

    Try editing your media query like this:

    /* Add these media query styles to your existing CSS */

@media (max-width: 768px) {
  .cc-iat {
    flex-direction: column;
    align-items: flex-start; /* Ensure items align to the start */
}

    .cc-iat-image,
    .cc-iat-image-content {
        flex-basis: 100%;
        width: 100%;
        left: 0;
        bottom: 0; 
        margin: 0;
    }

    .cc-iat-image-content {
        margin-top: 20px;
    }
}

    This will make sure that when the screen width is 768px or less, the .cc-iat container’s direction changes to column, and the child elements .cc-iat-image and .cc-iat-image-content take up 100% width, making sure to stack them one above the other.

    Hope that helps 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search