dimanche 10 avril 2022

why my is overlaying on another div on small screen

enter image description here

Whenever I check the responsiveness and check it on the small screen my one div starts overlaying another div. I have tried the ```position : relative and overflow: hidden as well but it makes no sense call you please tell me what I have to do to stop it from being overlaying another div

my HTML code is :

<div class="container-grid">
      <div class="grid_upper">
        <h1 class="grid_Heading">My recent projects</h1>
        <div class="grid_para">
          Ask me a Question if you are unable to solve it.
        </div>
      </div>
      <div class="cardContainer1">
        <div class="container">
          <div class="row">
            <div class="col-sm">
              <div class="card h-200">
                <img
                  src="./istockphoto-1074239826-170667a.jpg"
                  class="card-img-top"
                  alt="..."
                />
                <div class="card-footer">
                  <small class="card_text_1">Business</small>
                  <small class="text-muted"> 3  mins</small>
                </div>
                <div class="card-body">
                  <h5 class="card-title">Card </h5>
                  <p class="card-text">
                    This is a wider card with supporting text below as a natural
                    lead-in to additional content. This content is a little bit
                    longer.
                  </p>
                </div>
                <div class="card-footer footerNo2">
                  <img class="shortImg" src="./istockphoto-1074239826-170667a.jpg" alt="">
                  <div class="FooterInsideContainer">
                    <small class="text"> Micheal Corleone</small>
                    <small class="text-muted"> Senior web developer</small>
                  </div>
                </div>
             
              </div>
            </div>
            <div class="col-sm">
              <div class="card h-200">
                <img
                  src="./istockphoto-1272685152-612x612.jpg"
                  class="card-img-top"
                  alt="..."
                />
                <div class="card-footer">
                  <small class="card_text_1">Business</small>
                  <small class="text-muted"> 3  mins</small>
                </div>
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    This is a wider card with supporting text below as a natural
                    lead-in to additional content. This content is a little bit
                    longer.
                  </p>
                </div>
                <div class="card-footer footerNo2">
                  <img class="shortImg" src="./istockphoto-1074239826-170667a.jpg" alt="">
                  <div class="FooterInsideContainer">
                    <small class="text"> Micheal Corleone</small>
                    <small class="text-muted"> Senior web developer</small>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm">
              <div class="card h-200">
                <img
                  src="./photo-1473090826765-d54ac2fdc1eb.jpg"
                  class="card-img-top"
                  alt="..."
                />
                <div class="card-footer">
                  <small class="card_text_1">Business</small>
                  <small class="text-muted"> 3  mins</small>
                </div>
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    This is a wider card with supporting text below as a natural
                    lead-in to additional content. This content is a little bit
                    longer.
                  </p>
                </div>
                <div class="card-footer footerNo2">
                  <img class="shortImg" src="./istockphoto-1074239826-170667a.jpg" alt="">
                  <div class="FooterInsideContainer">
                    <small class="text"> Micheal Corleone</small>
                    <small class="text-muted"> Senior web developer</small>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row my-3">
            <div class="col-sm-4">
              <div class="card h-200">
                <img
                  src="./creative-book-cover-design-vintage-260nw-1115305040.webp"
                  class="card-img-top"
                  alt="..."
                />
                <div class="card-footer">
                  <small class="card_text_1">Business</small>
                  <small class="text-muted"> 3  mins</small>
                </div>
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    This is a wider card with supporting text below as a natural
                    lead-in to additional content. This content is a little bit
                    longer.
                  </p>
                </div>
                <div class="card-footer footerNo2">
                  <img class="shortImg" src="./istockphoto-1074239826-170667a.jpg" alt="">
                  <div class="FooterInsideContainer">
                    <small class="text"> Micheal Corleone</small>
                    <small class="text-muted"> Senior web developer</small>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-8" style="background-color: white;">
              <div class="card card2 h-200" >
                <img style="width: 100%;"
                  src="./wide-view-image-young-woman-paddling-sup-board-calm-morning-sea-water-rear-view_254268-2063.jpg"
                  class="card-img-top"
                  alt="..."
                />
                <div class="card-footer laster">
                  <small class="card_text_1">Business</small>
                  <small class="text-muted"> 3  mins</small>
                </div>
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    This is a wider card with supporting text below as a natural
                    lead-in to additional content. This content is a little bit
                    longer.
                  </p>
                </div>
                <div class="card-footer footerNo2_laster">
                  <img class="shortImg" src="./istockphoto-1074239826-170667a.jpg" alt="">
                  <div class="FooterInsideContainer">
                    <small class="text" style="color: black;"> Micheal Corleone</small>
                    <small class="text-muted"> Senior web developer</small>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      
        </div>
      </div>
    </div>
    <div class="Approach">
      <div class="app_head">
        <h1 class="main_approach_Heading">My approach</h1>
      </div>
      <div class="container">
        <div class="row row-cols-1 row-cols-md-3 g-4">
          <div class="col">
            <div class="card h-100">
              <!-- <img src="..." class="card-img-top" alt="..."> -->
              <h1 class="pic_char no1">1</h1>
              <div class="card-body">
                <h5 class="card-title">We will sit and talk drinking coffee</h5>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              </div>
              <div class="card-footer approach_footer">
                <div class="triangle arrow-up"></div>

              </div>
            </div>
          </div>
          <div class="col">
            <div class="card h-100">
              <!-- <img src="..." class="card-img-top" alt="..."> -->
              <h1 class="pic_char no2">2</h1>
              <div class="card-body">
                <h5 class="card-title">We will sketch some ugly Frameworks</h5>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content text below as a natural lead-in to additional content.</p>
              </div>
              <div class="card-footer approach_footer">
                <div class="app_circle">  </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card h-100">
              <!-- <img src="..." class="card-img-top" alt="..."> -->
              <h1 class="pic_char no3">3</h1>
              <div class="card-body">
                <h5 class="card-title">You will pay alot for my services</h5>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
              </div>
              <div class="card-footer approach_footer">
                <div class="triangle arrow-up"></div>
               
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

and the CSS code is :


    .grid_upper {
      display: flex;
      flex-direction: column;
      width: 67%;
      margin: auto;
    }
    .grid_Heading {
      font-size: clamp(2em, 2.5vw, 7em);
      padding: 0.5em 0.21em 0em 0em;
      color: white;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    }
    .grid_para {
      color: white;
    }
    .container-grid {
      display: flex;
      position: relative;
      height: 160vh;
      overflow: visible;
      flex-wrap: wrap;
      background-color: #3e4245;
    }
    .cardContainer1 {
      position: relative;
    
      display: flex;
      flex-wrap: wrap;
      padding: 2em 0em;
      width: 70%;
      margin: auto;
    }
    .cardContainer2 {
      position: relative;
    
      display: flex;
      flex-wrap: wrap;
      padding: 2em 0em;
      width: 70%;
      margin: auto;
    }
    .card {
      background-color: #252728;
      border: none;
      border-radius: 20px;
      height: 100%;
    }
    .card2 {
      background-color: white;
    }
    .card2 .card-title {
      color: black;
    }
    .card2 .card-text {
      color: grey;
    }
    
    .card-title {
      color: white;
    }
    .card-text {
      color: rgba(255, 255, 255, 0.522);
    }
    .card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: rgba(255, 255, 255, 0.522);
      background-color: #252728;
      /* background-color: red; */
      margin: none;
      border: none;
    }
    .card_text_1 {
      color: rgba(255, 255, 0, 0.659);
    }
    .card-img-top {
      width: 100%;
      height: 25vh;
      object-fit: cover;
    }
    .shortImg {
      height: 40px;
      width: 40px;
      border-radius: 50%;
    }
    .footerNo2 {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      /* flex-direction: column; */
      padding: 1em 1em;
      /* background-color: aqua; */
    }
    .footerNo2_laster {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      background-color: white;
    }
    .FooterInsideContainer {
      display: flex;
      flex-direction: column;
      padding: 0em 1em;
    }
    .laster {
      background-color: white;
    }
    .laster .card_text_1 {
      color: skyblue;
    }
    .Approach {
      position: relative;
      /* overflow: hidden; */
      height: 100vh;
      width: 100%;
      margin-top: 10em;
    }
    .app_head {
      padding: 7em 5em;
      display: flex;
      font-weight: bold;
      /* background-color: red; */
    }
    .main_approach_Heading {
      font-size: clamp(1.5rem, 10.5vw, 4rem); 
      font-family: "Roboto", sans-serif;
      margin: auto;
      text-align: center;
    }
    .pic_char {
      background-repeat: repeat;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      /* margin-top: 200px; */
      text-align: center;
      font-weight: bold;
      text-transform: uppercase;
      /* font-family: 'Times New Roman', Times, serif; */
      font-weight: 800;
      -webkit-font-smoothing: antialiased;
    }
    .no1 {
      background-image: url("./istockphoto-1288917639-170667a.jpg");
      font-family: "Montserrat Alternates", sans-serif;
      font-size: 13em;
    }
    .no2 {
      background-image: url("./polygonal-square-background-black-blue-purple-vector-21357114.jpg");
      /* font-family: 'Anton', sans-serif; */
      font-size: 12em;
    }
    .no3 {
      background-image: url("./android-marshmallow-6-hd-orange-yellow-and-gray-blocks-illustrarion-wallpaper-preview.jpg");
      font-size: 12em;
    }
    .Approach .card {
      display: flex;
      background-color: white;
      color: black;
      /* width: 50%; */
    }
    .Approach .card-body {
      display: flex;
      flex-direction: column;
      text-align: center;
      align-items: center;
      justify-content: center;
      padding: 0em 4em;
      /* background-color: pink; */
    }
    .Approach .card-title {
      color: black;
      font-weight: 700;
      font-size: 1.4em;
      font-feature-settings: "vrt2";
    }
    .Approach .card-text {
      color: grey;
      text-align: center;
    }
    .approach_footer {
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      color: grey;
    }
    .arrow-up {
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 20px solid white;
      box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
    }
    .app_circle{
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background-color: white;
      box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
    
    }





Aucun commentaire:

Enregistrer un commentaire