Text inside floated div not responsive

Question

In the following code:

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid View</title>
  <style>
    * {
      box-sizing: border-box;
    }
    
    html {
      font-size: 1vw;
    }
    
    body {
      padding: 0 0;
      margin: 0;
      background-color: violet;
      font-size: 1.1rem;
    }
    
    .container {
      width: 80%;
      margin: 0 auto;
    }
    
    header {
      background-color: rgb(133, 76, 76);
      border: .01rem solid rgb(133, 76, 76);
      margin-bottom: 4%;
      position: fixed;
      top: 0;
      left: 10%;
      right: 10%;
      padding: 0;
    }
    
    header h1 {
      text-align: center;
    }
    
    .row {
      background-color: blueviolet;
      margin-bottom: 4%;
    }
    
    .row::after {
      content: "";
      clear: both;
      display: table;
    }
    
    [class*="col-"] {
      float: left;
      padding: 15px;
      background-color: whitesmoke;
    }
    
    .col-1 {
      width: 8.33%;
    }
    
    .col-2 {
      width: 16.66%;
    }
    
    .col-3 {
      width: 25%;
    }
    
    .col-4 {
      width: 33.33%;
    }
    
    .col-5 {
      width: 41.66%;
    }
    
    .col-6 {
      width: 50%;
    }
    
    .col-7 {
      width: 58.33%;
    }
    
    .col-8 {
      width: 66.66%;
    }
    
    .col-9 {
      width: 75%;
    }
    
    .col-10 {
      width: 83.33%;
    }
    
    .col-11 {
      width: 91.66%;
    }
    
    .col-12 {
      width: 100%;
    }
    
    div#three div.col-3 {
      width: 24%;
      margin-right: 1.33%;
    }
    
    div#three div.col-3:last-of-type {
      margin-right: 0;
    }
    
    @media only screen and (max-width: 780px) {
      html {
        font-size: 2.5vw;
      }
      body {
        padding-top: 17%;
      }
    }
    
    @media only screen and (max-width: 480px) {
      html {
        font-size: 3vw;
      }
      body {
        padding-top: 17%;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div id="one" class="row">
      <div class="col-12">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
          labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
      </div>
    </div>

    <div id="three" class="row">
      <div class="col-3">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
          labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
      </div>
      <div class="col-3">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
          labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
      </div>
      <div class="col-3">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
          labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
      </div>
      <div class="col-3">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
          labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
      </div>
    </div>
  </div>
</body>

</html>

The web page breaks at around 470px (checked through device toolbar using chrome inspect). This happens as the text inside the 4 floated divs in the second row is not responsive and gets out of the div at 470px. This is only happening when the text is inside a floated element, when I make the divs block element again, the text becomes responsive.

Can someone tell me why this happens ?

vadivel a · Accepted Answer

Hope this help you. Added below mentioned CSS

    div#three div.col-3{
        width: 49%;
        margin: 0 0.5%;
        margin-bottom: 5px;}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid View</title>
  <style>
    * {
      box-sizing: border-box;
    }
    
    html {
      font-size: 1vw;
    }
    
    body {
      padding: 0 0;
      margin: 0;
      background-color: violet;
      font-size: 1.1rem;
    }
    
    .container {
      width: 80%;
      margin: 0 auto;
    }
    
    header {
      background-color: rgb(133, 76, 76);
      border: .01rem solid rgb(133, 76, 76);
      margin-bottom: 4%;
      position: fixed;
      top: 0;
      left: 10%;
      right: 10%;
      padding: 0;
    }
    
    header h1 {
      text-align: center;
    }
    
    .row {
      background-color: blueviolet;
      margin-bottom: 4%;
    }
    
    .row::after {
      content: "";
      clear: both;
      display: table;
    }
    
    [class*="col-"] {
      float: left;
      padding: 15px;
      background-color: whitesmoke;
    }
    
    .col-1 {
      width: 8.33%;
    }
    
    .col-2 {
      width: 16.66%;
    }
    
    .col-3 {
      width: 25%;
    }
    
    .col-4 {
      width: 33.33%;
    }
    
    .col-5 {
      width: 41.66%;
    }
    
    .col-6 {
      width: 50%;
    }
    
    .col-7 {
      width: 58.33%;
    }
    
    .col-8 {
      width: 66.66%;
    }
    
    .col-9 {
      width: 75%;
    }
    
    .col-10 {
      width: 83.33%;
    }
    
    .col-11 {
      width: 91.66%;
    }
    
    .col-12 {
      width: 100%;
    }
    
    div#three div.col-3 {
      width: 24%;
      margin-right: 1.33%;
    }
    
    div#three div.col-3:last-of-type {
      margin-right: 0;
    }
    
    @media only screen and (max-width: 780px) {
      html {
        font-size: 2.5vw;
      }
      body {
        padding-top: 17%;
      }
      div#three div.col-3 {
        width: 49%;
        margin: 0 0.5%;
        margin-bottom: 5px;
      }
    }
    
    @media only screen and (max-width: 480px) {
      html {
        font-size: 3vw;
      }
      body {
        padding-top: 17%;
      }
    }
    
    @media only screen and (max-width: 380px) {
      div#three div.col-3 {
        width: 99%;
        margin: 0 0.5%;
        margin-bottom: 5px;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div id="one" class="row">
      <div class="col-12">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
          labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
      </div>
    </div>

    <div id="three" class="row">
      <div class="col-3">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
          labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
      </div>
      <div class="col-3">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
          labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
      </div>
      <div class="col-3">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
          labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
      </div>
      <div class="col-3">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
          labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
      </div>
    </div>
  </div>
</body>

</html>

Text inside floated div not responsive

Tags:

html

css

user123456789

1 Answers

vadivel a

Recent Activity

Donate For Us

Text inside floated div not responsive

Tags:

html

css

user123456789

1 Answers

vadivel a

Related questions

Recent Activity

Donate For Us