Search code examples
htmlcsscss-grid

Alignment issue with CSS Grid

I'm trying to create a description that I can use in my WooCommerce product descriptions. I've used CSS grid to essentially create the layout I want. However, I am having issues with the alignment of the H3 titles.

As shown, even with the same FA Icon, H3 Titles 'Outside' and 'Location' are not in the same horizontal position as the others.

Any idea of why this is happening?

Codepen Link

enter image description here

/****** Product Property Descritpion ******/

.property_long_description_container {
  display: block;
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.propertydescription_wrapper {
  display: grid;
  padding: 25px 0px;
  grid-gap: 1rem;
  align-items: center;
  grid-template-columns: min-content auto;
  width: 100%;
  height: 100%;
}

.propertydescription_wrapper #icon i.fas {
  color: #B1DDF1;
  font-size: 32px;
  max-width: 32px;
  width: 32px;
}

.propertydescription_wrapper div#dd-icon i.fas {
  color: #A7784A;
  font-size: 32px !important;
  max-width: 32px !important;
  width: 32px !important;
}

.propertydescription_wrapper div#title h3,
.propertydescription_wrapper div#title h4 {
  margin: 0;
  padding-left: 10px;
  color: #31324E;
}

.propertydescription_wrapper div#text {
  grid-column: span 2;
  margin-left: 60px;
}

@media screen and (max-width: 768px) {
  .propertydescription_wrapper #icon i.fas {
    color: #B1DDF1;
    font-size: 24px !important;
    max-width: 24px !important;
    width: 24px !important;
  }
  .propertydescription_wrapper div#dd-icon i.fas {
    color: #A7784A;
    font-size: 24px !important;
    max-width: 24px !important;
    width: 24px !important;
  }
  .propertydescription_wrapper div#text {
    grid-column: span 2;
    margin-left: 0px !important;
  }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="property_long_description_container">
  <!--- Row One : Property Description -->
  <div class="propertydescription_wrapper">
    <div id="icon"><i class="fas fa-info-circle" aria-hidden="true"><!--tr--></i></div>
    <div id="title">
      <h3>Property Description</h3>
    </div>
    <div id="text">
      Listing Status: Coming Soon
    </div>
  </div>

  <!--- Row Two : Accommodation -->
  <div class="propertydescription_wrapper">

    <div id="icon"><i class="fas fa-home" aria-hidden="true"><!--tr--></i></div>

    <div id="title">
      <h3>Accommodation</h3>
    </div>

    <div id="text">
      <table>
        <tbody>
          <tr>
            <td>Ground Floor</td>
            <td>Kitchen, Dining Room, Living Room</td>
          </tr>
          <tr>
            <td>First Floor</td>
            <td>Two Bedrooms, Bathroom</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>

  <!--- Row Three: Outside -->
  <div class="propertydescription_wrapper">

    <div id="icon"><i class="fas fa-home" aria-hidden="true"><!--tr--></i></div>

    <div id="title">
      <h3>Outside</h3>
    </div>

    <div id="text">Garden to front and rear with private drive which would accommodate one car. The gardens are well kept and relatively low maintenance.</div>

  </div>

  <!--- Row Four: Location -->
  <div class="propertydescription_wrapper">
    <div id="icon"><i class="fas fa-map-marker-alt" aria-hidden="true"><!--tr--></i></div>
    <div id="title">
      <h3>Location</h3>
    </div>
    <div id="text">The property sits in a popular central location, ideally placed for access into both Ayr Town Centre and Prestwick Main Street. There are good local schools nearby and Heathfield Retail Park and Supermarkets are only a short distance away.</div>
  </div>

  <!--- Row Five: Neighbourhood-->
  <div class="propertydescription_wrapper">

    <div id="icon"><i class="fas fa-search-location" aria-hidden="true"><!--tr--></i></div>

    <div id="title">
      <h3>Neighbourhood</h3>
    </div>
    <div id="text">
      Listing Status: Coming Soon
    </div>
  </div>

</div>

Solution

  • Changing the min-content auto to any value higher than 50% (I used 100%) would solve the Alignment issue.

    /****** Product Property Descritpion ******/

.property_long_description_container {
  display: block;
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.propertydescription_wrapper {
  display: grid;
  padding: 25px 0px;
  grid-gap: 1rem;
  align-items: center;
  grid-template-columns: min-content 100%;
  width: 100%;
  height: 100%;
}

.propertydescription_wrapper #icon i.fas {
  color: #B1DDF1;
  font-size: 32px;
  max-width: 32px;
  width: 32px;
}

.propertydescription_wrapper div#dd-icon i.fas {
  color: #A7784A;
  font-size: 32px !important;
  max-width: 32px !important;
  width: 32px !important;
}

.propertydescription_wrapper div#title h3,
.propertydescription_wrapper div#title h4 {
  margin: 0;
  padding-left: 10px;
  color: #31324E;
}

.propertydescription_wrapper div#text {
  grid-column: span 2;
  margin-left: 60px;
}

@media screen and (max-width: 768px) {
  .propertydescription_wrapper #icon i.fas {
    color: #B1DDF1;
    font-size: 24px !important;
    max-width: 24px !important;
    width: 24px !important;
  }
  .propertydescription_wrapper div#dd-icon i.fas {
    color: #A7784A;
    font-size: 24px !important;
    max-width: 24px !important;
    width: 24px !important;
  }
  .propertydescription_wrapper div#text {
    grid-column: span 2;
    margin-left: 0px !important;
  }
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="property_long_description_container">
  <!--- Row One : Property Description -->
  <div class="propertydescription_wrapper">
    <div id="icon"><i class="fas fa-info-circle" aria-hidden="true"><!--tr--></i></div>
    <div id="title">
      <h3>Property Description</h3>
    </div>
    <div id="text">
      Listing Status: Coming Soon
    </div>
  </div>

  <!--- Row Two : Accommodation -->
  <div class="propertydescription_wrapper">

    <div id="icon"><i class="fas fa-home" aria-hidden="true"><!--tr--></i></div>

    <div id="title">
      <h3>Accommodation</h3>
    </div>

    <div id="text">
      <table>
        <tbody>
          <tr>
            <td>Ground Floor</td>
            <td>Kitchen, Dining Room, Living Room</td>
          </tr>
          <tr>
            <td>First Floor</td>
            <td>Two Bedrooms, Bathroom</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>

  <!--- Row Three: Outside -->
  <div class="propertydescription_wrapper">

    <div id="icon"><i class="fas fa-home" aria-hidden="true"><!--tr--></i></div>

    <div id="title">
      <h3>Outside</h3>
    </div>

    <div id="text">Garden to front and rear with private drive which would accommodate one car. The gardens are well kept and relatively low maintenance.</div>

  </div>

  <!--- Row Four: Location -->
  <div class="propertydescription_wrapper">
    <div id="icon"><i class="fas fa-map-marker-alt" aria-hidden="true"><!--tr--></i></div>
    <div id="title">
      <h3>Location</h3>
    </div>
    <div id="text">The property sits in a popular central location, ideally placed for access into both Ayr Town Centre and Prestwick Main Street. There are good local schools nearby and Heathfield Retail Park and Supermarkets are only a short distance away.</div>
  </div>

  <!--- Row Five: Neighbourhood-->
  <div class="propertydescription_wrapper">

    <div id="icon"><i class="fas fa-search-location" aria-hidden="true"><!--tr--></i></div>

    <div id="title">
      <h3>Neighbourhood</h3>
    </div>
    <div id="text">
      Listing Status: Coming Soon
    </div>
  </div>

</div>