laura-313 / f1-3-c2p1-colmar-academy

0 stars 0 forks source link

use repeating classes instead of practice-box and thesis-detail-section #5

Open elisementor opened 7 years ago

elisementor commented 7 years ago

these do the same thing and should look identical so try something like this

/* Universal Component - Content Image Box */

.content-image-box {
  display: flex;
  padding: 1rem 0 1rem 1rem;
  border-bottom: 1px solid rgb(245, 245, 245);
}

.content-image-box:first-child {
  padding-top: 0;
}

.content-image-box:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.content-image-box .media-container {
  width: 35%;
}

.content-image-box .text-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 65%;
  padding: 0 0.75rem 0 1rem;
}

.content-image-box h4 {
  padding-bottom: .5rem;
  font-size: 1.25rem;
  font-weight: bold;
}

.content-image-box p {
  padding-bottom: .5rem;
}

.content-image-box .mobile {
  display: none;
}

@media only screen and (max-width: 895px) {
  .content-image-box .desktop {
    display: none;
  }

  .content-image-box .mobile {
    display: block;
  }

  .content-image-box {
    padding-left: 0;
    border-bottom: none;
  }

  .content-image-box .media-container {
    width: 100%;
  }
}

the mobile version has the mobile image

 <div class="content-image-box">
        <div class="media-container">
          <img class="desktop" src="resources/images/information-orientation.jpg">
          <img class="mobile" src="resources/images/information-orientation-mobile.jpg">
        </div>
        <div class="text-content">
          <h4>Orientation date</h4>
          <p>Tue 10/11 &amp; Wed 10/12: 8am - 3pm</p>
          <a href="#">Read more</a>
        </div>
      </div>