1

So i trying the flexbox. On small devices (max-width <= 800px) i place the 2 divs in column. But the image has a little gap with the container div. So my question is how i remove this gap below the image, so the image will fit 100% on the height and the orange color below the image disappear (check below image)?

I get this weird behaviour only on google-chrome browser. In firefox it's work as expected.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Example</title>
  
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap');

    body {
      margin: 0;
      padding: 0;
      font-family: "Nunito";
      font-size: 1.1rem;
    }

    #div-4 {
      padding: 5%;
    }
    
  .flex-container {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      background-color: #ffb265;
  }

  .flex-child {
      flex: 1;
  }

  img {
    width: 100%;
    height: 100%;
  }

@media only screen and (max-width: 800px){

    .flex-container {
      flex-direction: column;
    }

    #div-3 {
      order: 2;
    }
}
  </style>
</head>
<body>
  <div class="flex-container">
    <div id="div-3" class="flex-child">
      <img src="https://dummyimage.com/16:9x1080" alt="Dummy Image">
    </div>
    
    <div id="div-4" class="flex-child">
      <h1>Lorem ipsum</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut iste, ex accusamus quam saepe nesciunt sequi in quod nobis aspernatur aperiam facilis vero excepturi maxime laboriosam dolorem necessitatibus recusandae debitis omnis esse nisi numquam hic sed optio! Eveniet, reprehenderit. Aut iure eum error saepe consequuntur soluta voluptate sed possimus natus, quae nostrum rem nesciunt assumenda delectus magnam quibusdam voluptates quod iusto provident libero perspiciatis! Ipsam hic iste inventore perferendis ea architecto et repellendus, consequuntur porro corporis, ratione odio error corrupti sunt rerum cum maiores quas magni at, iure quo molestiae aut laudantium? Cumque asperiores optio dignissimos earum, nisi molestiae aliquam.</p>
    </div>
  </div>


  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, nam enim delectus asperiores nemo, officia ullam minus quos quis autem fugiat odit sequi blanditiis, labore similique animi corrupti necessitatibus tempora?
  </div>

  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, nam enim delectus asperiores nemo, officia ullam minus quos quis autem fugiat odit sequi blanditiis, labore similique animi corrupti necessitatibus tempora?
  </div>

</body>
</html>

enter image description here

Manolis P.
  • 195
  • 2
  • 14
  • 1
    Probably ```line-height``` being a little wacky. Adding ```line-height: 0``` to ```#div-3``` seems to do the trick. – TARN4T1ON Mar 29 '21 at 10:42
  • @TARN4T1ON Yes you are right! Can you explain me the reason of that weird think? – Manolis P. Mar 29 '21 at 10:44
  • 1
    Adding `display: block` to your image will remove the space below the image. The space is for descenders. See this https://stackoverflow.com/a/5804278/1011984 for more information. – Rich DeBourke Mar 31 '21 at 07:07

1 Answers1

0

Just add this code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap');
        body {
            margin: 0;
            padding: 0;
            font-family: "Nunito";
            font-size: 1.1rem;
        }
        
        #div-4 {
            padding: 5%;
        }
        
        .flex-container {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            background-color: #ffb265;
        }
        
        .flex-child {
            flex: 1;
        }
        
        img {
            width: 100%;
            height: 100%;
        }
        
        @media only screen and (max-width: 800px) {
            .flex-container {
                flex-direction: column;
            }
            #div-3 {
                order: 2;
                /* add this */
                display: flex;

            }
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div id="div-3" class="flex-child">
            <img src="https://dummyimage.com/16:9x1080" alt="Dummy Image">
        </div>

        <div id="div-4" class="flex-child">
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut iste, ex accusamus quam saepe nesciunt sequi in quod nobis aspernatur aperiam facilis vero excepturi maxime laboriosam dolorem necessitatibus recusandae debitis omnis esse nisi numquam
                hic sed optio! Eveniet, reprehenderit. Aut iure eum error saepe consequuntur soluta voluptate sed possimus natus, quae nostrum rem nesciunt assumenda delectus magnam quibusdam voluptates quod iusto provident libero perspiciatis! Ipsam
                hic iste inventore perferendis ea architecto et repellendus, consequuntur porro corporis, ratione odio error corrupti sunt rerum cum maiores quas magni at, iure quo molestiae aut laudantium? Cumque asperiores optio dignissimos earum, nisi
                molestiae aliquam.</p>
        </div>
    </div>


    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, nam enim delectus asperiores nemo, officia ullam minus quos quis autem fugiat odit sequi blanditiis, labore similique animi corrupti necessitatibus tempora?
    </div>

    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, nam enim delectus asperiores nemo, officia ullam minus quos quis autem fugiat odit sequi blanditiis, labore similique animi corrupti necessitatibus tempora?
    </div>

</body>

</html>
Semo
  • 29
  • 4