sanjihan sanjihan - 1 month ago 10
HTML Question

inserting content into grid boxes

I made a responsive grid layout. This is it's pen. I would like to add content to each li element in the layout. I made a content by itself and it looks like the code below. However, inserting this code into

li
elements, messes up the layout. Any idea how can I insert the code below into
li
elements?



.wrapper-1 {
padding:10px 10px;
}

.wrapper-3 {
display:inline;
width: 400px;
height: 100px;
padding:10px 10px;
}

.left-side {
float: left;
width: 60px;
height: 100px;
margin-right: 15px;
}

.left-side > .image {
background: url(http://placehold.it/100x100) no-repeat center center;
width: 50px;
height: 50px;
margin-right: 10px;
margin-bottom:10px;
}

.right-side {
float: left;
width: 285px;
height: 100px;
}

.right-side > .title {
margin: 0;
}

<div class="wrapper-1">
<div class="left-side">
<div class="image"></div>
<img src="" alt="">
</div>

<div class="right-side">
<h3 class="title">HEY NOW</h3>
<p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock </p>
</div>
</div>




Answer

The padding-top values in #Grid li and margin-right: 15px in .left-side are breaking the responsive. Here is the solution:

div, ul, li{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* -- FLUID GRID STYLES -- */

#Grid{
  margin-bottom: 40px;
  text-align: justify;
  padding:35px;
}

#Grid li{
  display: inline-block;
  background: #eee;
  width: 31%;
  margin-bottom: 2.5%;
}

#Grid:after{
  content: '';
  display: inline-block;
  width: 100%;
  
}


/* -- MEDIA QUERIES DEFINING RESPONSIVE LAYOUTS -- */

/* 3 COL */

@media (max-width: 900px){
  #Grid li{
    width: 48%;
    margin-bottom: 3%;
  }
}

/* 2 COL */

@media (max-width: 800px){
  #Grid li{
    width: 48%;
    margin-bottom: 4%;
  }
}

/* SINGLE COL */

@media (max-width: 550px){
  #Grid li{
    width: 100%;
    margin-bottom: 5%;
  }
}

.element-container {
  margin: 0 auto;
  padding: 10px;
  background-color: red;
	max-width:1140px;
}


.wrapper-1 {
  padding:10px 10px;
}

.wrapper-3 {
  display:inline;
  width: 96%;
  height: 100px;
  padding:10px 2%;
}

.left-side {
  float: left;
  width: 25%;
  height: 100px;
}

.left-side > .image {
  background: url(http://placehold.it/100x100) no-repeat center center;
  width: 50px;
  height: 50px;
  margin-right: 10px;
  margin-bottom:10px;
}

.right-side {
  float: left;
  width: 75%;
  height: 100px;
}

.right-side > .title {
  margin: 0;
  font-size: 1em;
}

.right-side > .text {
  margin: 0;
  font-size: 0.5em;
}
<div class="element-container">
  <ul id="Grid">
    <li>
      <div class="wrapper-1">
        <div class="left-side">
          <div class="image"></div>
          <img src="" alt="">
        </div>

        <div class="right-side">
          <h3 class="title">HEY NOW</h3>
          <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock  </p>
        </div>
      </div>
    </li>

    <li>
      <div class="wrapper-1">
        <div class="left-side">
          <div class="image"></div>
          <img src="" alt="">
        </div>

        <div class="right-side">
          <h3 class="title">HEY NOW</h3>
          <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock  </p>
        </div>
      </div>
    </li>

    <li>
      <div class="wrapper-1">
        <div class="left-side">
          <div class="image"></div>
          <img src="" alt="">
        </div>

        <div class="right-side">
          <h3 class="title">HEY NOW</h3>
          <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock  </p>
        </div>
      </div>
    </li>

    <li>
      <div class="wrapper-1">
        <div class="left-side">
          <div class="image"></div>
          <img src="" alt="">
        </div>

        <div class="right-side">
          <h3 class="title">HEY NOW</h3>
          <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock  </p>
        </div>
      </div>
    </li>

    <li>
      <div class="wrapper-1">
        <div class="left-side">
          <div class="image"></div>
          <img src="" alt="">
        </div>

        <div class="right-side">
          <h3 class="title">HEY NOW</h3>
          <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock  </p>
        </div>
      </div>
    </li>

    <li class="placeholder">
      <div class="wrapper-1">
        <div class="left-side">
          <div class="image"></div>
          <img src="" alt="">
        </div>

        <div class="right-side">
          <h3 class="title">HEY NOW</h3>
          <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock  </p>
        </div>
      </div>
    </li>
  </ul>
</div>

By the way, I couldn't understand why you are using font-size: 0.1px; in #Grid. I have removed it and added the following two lines to make the texts responsive.

.right-side > .title {
  font-size: 1em;
}

.right-side > .text {
  font-size: 0.5em;
}