Search code examples
htmlcssflexboxcss-grid

The text along side the icons are not aligning properly

My question is is flexbox necessary or is there any easy way around to get it done. it been a long time since I practised , so I do not recall anything. 

.sadaka-contacts p {
  color: #115c9b;
  font-size: 14px;
  line-height: 1.42;
}

.sadaka-contacts li {
  list-style: none;
  width: 35px;
  height: 35px;
  background: #1f76bd;
  margin-bottom: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sadaka-contacts li i {
  color: white;
}
<div id="contact-area" class="sadaka-contacts">
  <h3>SADAKA CONTACTS</h3>
  <p>Sadaka ipsum dolor sit amet, consectetur adipiscing elit. Ut at eros rutrum turpis viverra elementum semper quis ex. Donec lorem nulla .</p>
  <ul>
    <li>
      <i class="fa fa-map-marker"></i>
      <p>135 Hay el nahda, Rabat, Morocco</p>
    </li>
    <li>
      <i class="fa fa-phone"></i>
      <p>00 210 25 55 55 11</p>
    </li>
    <li>
      <i class="fa fa-envelope"></i>
      <p>[email protected]</p>
    </li>
  </ul>
</div>
</div>

this is how its looking now

this is how I want it to look like

]2

Solution

  • So I have done the below changes to your code:

    1. Moved the background and dimensions from li element to i.
    2. Removed justify-content: center from li
    3. Center the icon in i by using a centered flexbox.
    4. Reset the default padding of ul to zero.

    See demo below - I guess you can take it forward from here:

    .sadaka-contacts p {
  color: #115c9b;
  font-size: 14px;
  line-height: 1.42;
}

.sadaka-contacts li {
  list-style: none;
  /*width: 35px;*/
  /*height: 35px;*/
  /*background: #1f76bd;*/
  /*margin-bottom: 5px;*/
  display: flex;
  /*justify-content: center;*/
  align-items: center;
}

.sadaka-contacts li i {
  color: white;
  /* ADDED THE BELOW */
  /* These style were applied to li before */
  width: 35px;
  height: 35px;
  background: #1f76bd;
  margin-bottom: 5px;
  /* Adding a separation margin */
  margin-right: 5px;
  /* Centering the icon */
  display: flex;
  justify-content: center;
  align-items: center;
}

.sadaka-contacts ul {
  padding: 0;
}
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div id="contact-area" class="sadaka-contacts">
  <h3>SADAKA CONTACTS</h3>
  <p>Sadaka ipsum dolor sit amet, consectetur adipiscing elit. Ut at eros rutrum turpis viverra elementum semper quis ex. Donec lorem nulla .</p>
  <ul>
    <li>
      <i class="fa fa-map-marker"></i>
      <p>135 Hay el nahda, Rabat, Morocco</p>
    </li>
    <li>
      <i class="fa fa-phone"></i>
      <p>00 210 25 55 55 11</p>
    </li>
    <li>
      <i class="fa fa-envelope"></i>
      <p>[email protected]</p>
    </li>
  </ul>
</div>
</div>