Flex container clickable with image on left side and text on right centered

The desired result should be: enter image description here

I know CSS, except flex & grid – both of them drive me crazy.

I need a flex container with 2 columns, entire container must be clickable. The container have image on left side and text on right side.

.myflex-container {
  display: flex;
  flex-direction: row;
  font-size: 20px;
  text-align: center;
}
.myflex-item-left {
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  padding: 0;
  flex: 50%;
  margin-right: 4%;
  margin-bottom: 16px;
}
.myflex-item-right {
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  padding: 0;
  flex: 50%;
  margin-bottom: 16px;
}
img.imgoxauto {
width: 72px;
height: 72px;
}
<div class="myflex-container">
<a href="https://www.example.com/abc">
<div class="myflex-item-left">
<div class="myprod-image"><img class="imgoxauto" src="https://i.imgur.com/jPGPiJN.jpg" alt="London"></div>  
<div class="myprod-description">
<h5 class="texth5 myprod-name">London</h5>
</div>
</a>
</div>

<a href="https://www.example.com/xyz">
<div class="myflex-item-right">
<div class="myprod-image"><img class="imgoxauto" src="https://i.imgur.com/0MAl65z.jpg"></div>  
<div class="myprod-description">
<h5 class="texth5 myprod-name">Chicago</h5>
</div>
</a>
</div>
</div>

Any help would be appreciated.

Answer

I found some problems with your markup in terms of opening and closing brackets not matching. Apart from these problems you could approach the styling something like this:

.myflex-container {
  display: flex;
  flex-direction: row;
  font-size: 20px;
  text-align: center;
}

.myflex-item-left,
.myflex-item-right {
  flex: 50%;
  margin: 10px;
}

img.imgoxauto {
  height: 100%;
  width: 74px;
}

.myprod-image {
  height: 74px;
  margin-right: 10px;
}

.myflex-item-left > a,
.myflex-item-right > a {
  display: flex;
}

.clickable-card {
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  margin-bottom: 10px;
}
<div class="myflex-container">
  <div class="myflex-item-left">
    <a href="https://www.example.com/abc" class="clickable-card">
      <div class="myprod-image">
        <img
          class="imgoxauto"
          src="https://i.imgur.com/jPGPiJN.jpg"
          alt="London"
        />
      </div>
      <div class="myprod-description">
        <h5 class="texth5 myprod-name">London</h5>
      </div>
    </a>
    <a href="https://www.example.com/abc" class="clickable-card">
      <div class="myprod-image">
        <img
          class="imgoxauto"
          src="https://i.imgur.com/jPGPiJN.jpg"
          alt="London"
        />
      </div>
      <div class="myprod-description">
        <h5 class="texth5 myprod-name">London</h5>
      </div>
    </a>
    <a href="https://www.example.com/abc" class="clickable-card">
      <div class="myprod-image">
        <img
          class="imgoxauto"
          src="https://i.imgur.com/jPGPiJN.jpg"
          alt="London"
        />
      </div>
      <div class="myprod-description">
        <h5 class="texth5 myprod-name">London</h5>
      </div>
    </a>
  </div>

  <div class="myflex-item-right">
    <a href="https://www.example.com/xyz" class="clickable-card">
      <div class="myprod-image">
        <img
          class="imgoxauto"
          src="https://i.imgur.com/0MAl65z.jpg"
          alt="Chicago"
        />
      </div>
      <div class="myprod-description">
        <h5 class="texth5 myprod-name">Chicago</h5>
      </div>
    </a>
    <a href="https://www.example.com/xyz" class="clickable-card">
      <div class="myprod-image">
        <img
          class="imgoxauto"
          src="https://i.imgur.com/0MAl65z.jpg"
          alt="Chicago"
        />
      </div>
      <div class="myprod-description">
        <h5 class="texth5 myprod-name">Chicago</h5>
      </div>
    </a>
    <a href="https://www.example.com/xyz" class="clickable-card">
      <div class="myprod-image">
        <img
          class="imgoxauto"
          src="https://i.imgur.com/0MAl65z.jpg"
          alt="Chicago"
        />
      </div>
      <div class="myprod-description">
        <h5 class="texth5 myprod-name">Chicago</h5>
      </div>
    </a>
  </div>
</div>

So the main idea is to give the parent flex container flex-direction: row so its children columns are displayed next to each other. Then we want each of these two child columns to have their children (cards) be displayed underneath each other.

Update

From testing out the website you linked the text in the card wasn’t aligned in the middle so I added:

.myflex-item-left > a, .myflex-item-right > a {
    display: flex;
    align-items: center;
}

h5.texth5.myprod-name {
    padding-bottom: 0;
}

The padding-bottom: 0 is set to counteract default padding value set by h5 styles.

Leave a Reply

Your email address will not be published. Required fields are marked *