Thursday, November 17, 2022

[FIXED] how to align elements from within two different cards

      , ,      No comments   

Issue

I know this has been asked in this forum many times, but I read every topic about it and tried many suggested solutions and still, I'm not able to make it work for my own case.

Here's this case. I have this grid of content cards, but depending on the length of the content or whether or not every element in the card is used, the card has a different height. So, elements are not aligned from one card to another. I'd like to edit my code so the top of each element starts at a relative height so they are aligned.

Codepen: https://codepen.io/louischausse/pen/VRQxgB

I'd like that top of each child div align with each other

Thanks for your help

.section__etudes-card > span, [gr-grid~=row--block], .section__featured-article .hs_cos_wrapper .widget-module ul {
  position: relative;
  display: -ms-flexbox;
  -js-display: flex;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  margin-left: -15px;
  margin-right: -15px;
  align-items: stretch;}

.section__etudes-card > span > div, [gr-grid=block], .section__featured-article .hs_cos_wrapper .widget-module ul li {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 30px; }

.section__etudes-card {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem; }
  .section__etudes-card > span > div {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    max-width: 50%; }
    @media (min-width: 48em) {
      .section__etudes-card > span > div {
        -ms-flex-preferred-size: 33%;
            flex-basis: 33%;
        max-width: 33%; } }
    @media (min-width: 64em) {
      .section__etudes-card > span > div {
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
        max-width: 25%; } }
    .section__etudes-card > span > div:empty {
      display: none; }

.etude-card {
  display: block;
  text-align: center;
  margin-bottom: 0.9375rem;
  text-decoration: none; }
  @media (min-width: 64em) {
    .etude-card:hover [class*="btn--"] {
      /*transform: scale(1.05);*/
      color: #fff;
      background-color: #e98815;
      border-color: #e98815; } }
  .etude-card .etude-card__title {
    margin-top: 0.9375rem;
    margin-bottom: 0.9375rem;
    font-weight: bold;
    color: #333333;
    line-height: 1.1; }
  .etude-card .etude-card__date {
    font-size: 0.8125em;
    margin-top: 0.625rem;
    margin-bottom: 0.625rem; }
  .etude-card .etude-card__ufc {
    color: #FFFFFF;
    font-size: .75em;
    padding: 3px 8px;
    background-color: #e98815;  
    width: 75px;
    margin: 0 auto;
    border: 1px solid #e98815;}
  .etude-card .etude-card__cost {
    color: #e98815;
    font-size: .75em;
    padding: 3px 8px;
    width: 75px;
    margin: 0 auto;
    border: 1px solid #e98815;}
  .etude-card [class*="btn--"] {
    padding-left: .5em;
    padding-right: .5em;
    text-transform: none; }
  .etude-card img {
    width: 100%;
    max-width: 215px;
    margin-left: auto;
    margin-right: auto; }

  .etude-card__ufc:empty {
      display: none; }
  .etude-card__cost:empty {
      display: none; }

    .btn--primary {
    padding: 10px 35px;
    font-size: 16px;
    border-radius: 5px;
    display: inline-block;
    position: relative;
    z-index: 0;
    text-decoration: none;
    text-transform: none !important;
    color: #FFFFFF;
    background-color: #e98815;
    border: 2px solid transparent;
}

.btn--primary:hover {
    background: #ffffff !important;
    color: #e98815 !important;
    border: 2px solid #e98815 !important;
}
<section class="section__etudes-card">
        <span id="hs_cos_wrapper_Ressource_center_element" class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container" style="" data-hs-cos-general-type="widget_container" data-hs-cos-type="widget_container"><div id="hs_cos_wrapper_widget_1552502647360" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module">
    <a href="https://codepen.io/" class="etude-card">
        
            <img src="https://i.ibb.co/34S4L8B/image-placeholder.jpg" alt="image-placeholder"/>
        
        <div class="etude-card__title">
            THIS IS EVENT TITLE
        </div>
        <div class="etude-card__ufc">TAG 1</div>
        <div class="etude-card__date">
            Place
        </div>
        <div class="etude-card__date">
            Time
        </div>
        <span class="btn--primary">
            See details
        </span>
    </a>
</div>
<div id="hs_cos_wrapper_widget_1552496573108" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module">
    <a href="https://codepen.io/" class="etude-card">
        
            <img src="https://i.ibb.co/34S4L8B/image-placeholder.jpg" alt="image-placeholder"/>
        
        <div class="etude-card__title">
            THIS A VERY MUCH LONGER EVENT TITLE CAUSING PROBLEMS
        </div>
        <div class="etude-card__ufc">TAG 1</div>
        <div class="etude-card__cost">TAG 2</div>
        <div class="etude-card__date">
            Place
        </div>
        <div class="etude-card__date">
            Time
        </div>
        <span class="btn--primary">
            See details
        </span>
    </a>
</div>
<div id="hs_cos_wrapper_widget_1551887999614" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><!-- custom widget definition not found --></div>
<div id="hs_cos_wrapper_widget_1551888011972" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><!-- custom widget definition not found --></div>
<div id="hs_cos_wrapper_widget_1551888047237" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module">
    <a href="https://codepen.io/" class="etude-card">
        
            <img src="https://i.ibb.co/34S4L8B/image-placeholder.jpg" alt="image-placeholder"/>
        
        <div class="etude-card__title">
            THIS IS EVENT TITLE
        </div>
        <div class="etude-card__cost">TAG 2</div>
        <div class="etude-card__date">
            Place
        </div>
        <div class="etude-card__date">
            Time
        </div>
        <span class="btn--primary">
            See details
        </span>
    </a>
</div>
</section>


Solution

Is here what you want :

  • All the events title aligned
  • All the tag aligned
  • The button always at the bottom

What you will need

  • All the card having the same height

  • The card being a flex column

For mor clarity, I'll add the necessary css at the end of your css.

.section__etudes-card > span > div {
  display: flex; /* Necessary for the cards to have the same height */
}
.etude-card {
  display: flex;  /* Necessary for the cards to have the same height */
  flex-direction: column;  /* To be able to push the childrens down */
  width: 100%;
}
.etude-card > :nth-child(3) {
  margin-top: auto; /* Will push the first tag down */
}
.etude-card__date:nth-last-child(3) {
  margin-top: auto; /* Will push everything starting with the date down */
}


.section__etudes-card > span, [gr-grid~=row--block], .section__featured-article .hs_cos_wrapper .widget-module ul {
  position: relative;
  display: -ms-flexbox;
  -js-display: flex;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  margin-left: -15px;
  margin-right: -15px;
  align-items: stretch;}

.section__etudes-card > span > div, [gr-grid=block], .section__featured-article .hs_cos_wrapper .widget-module ul li {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 30px; }

.section__etudes-card {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem; }
  .section__etudes-card > span > div {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    max-width: 50%; }
    @media (min-width: 48em) {
      .section__etudes-card > span > div {
        -ms-flex-preferred-size: 33%;
            flex-basis: 33%;
        max-width: 33%; } }
    @media (min-width: 64em) {
      .section__etudes-card > span > div {
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
        max-width: 25%; } }
    .section__etudes-card > span > div:empty {
      display: none; }

.etude-card {
  display: block;
  text-align: center;
  margin-bottom: 0.9375rem;
  text-decoration: none; }
  @media (min-width: 64em) {
    .etude-card:hover [class*="btn--"] {
      /*transform: scale(1.05);*/
      color: #fff;
      background-color: #e98815;
      border-color: #e98815; } }
  .etude-card .etude-card__title {
    margin-top: 0.9375rem;
    margin-bottom: 0.9375rem;
    font-weight: bold;
    color: #333333;
    line-height: 1.1; }
  .etude-card .etude-card__date {
    font-size: 0.8125em;
    margin-top: 0.625rem;
    margin-bottom: 0.625rem; }
  .etude-card .etude-card__ufc {
    color: #FFFFFF;
    font-size: .75em;
    padding: 3px 8px;
    background-color: #e98815;  
    width: 75px;
    margin: 0 auto;
    border: 1px solid #e98815;}
  .etude-card .etude-card__cost {
    color: #e98815;
    font-size: .75em;
    padding: 3px 8px;
    width: 75px;
    margin: 0 auto;
    border: 1px solid #e98815;}
  .etude-card [class*="btn--"] {
    padding-left: .5em;
    padding-right: .5em;
    text-transform: none; }
  .etude-card img {
    width: 100%;
    max-width: 215px;
    margin-left: auto;
    margin-right: auto; }

  .etude-card__ufc:empty {
      display: none; }
  .etude-card__cost:empty {
      display: none; }

    .btn--primary {
    padding: 10px 35px;
    font-size: 16px;
    border-radius: 5px;
    display: inline-block;
    position: relative;
    z-index: 0;
    text-decoration: none;
    text-transform: none !important;
    color: #FFFFFF;
    background-color: #e98815;
    border: 2px solid transparent;
}

.btn--primary:hover {
    background: #ffffff !important;
    color: #e98815 !important;
    border: 2px solid #e98815 !important;
}


/* The changes: */
.section__etudes-card > span > div {
  display: flex;
}
.etude-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.etude-card > :nth-child(3) {
  margin-top: auto;
}
.etude-card__date:nth-last-child(3) {
  margin-top: auto; 
}
<section class="section__etudes-card">
        <span id="hs_cos_wrapper_Ressource_center_element" class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container" style="" data-hs-cos-general-type="widget_container" data-hs-cos-type="widget_container"><div id="hs_cos_wrapper_widget_1552502647360" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module">
    <a href="https://codepen.io/" class="etude-card">
        
            <img src="https://i.ibb.co/34S4L8B/image-placeholder.jpg" alt="image-placeholder"/>
        
        <div class="etude-card__title">
            THIS IS EVENT TITLE
        </div>
        <div class="etude-card__ufc">TAG 1</div>
        <div class="etude-card__date">
            Place
        </div>
        <div class="etude-card__date">
            Time
        </div>
        <span class="btn--primary">
            See details
        </span>
    </a>
</div>
<div id="hs_cos_wrapper_widget_1552496573108" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module">
    <a href="https://codepen.io/" class="etude-card">
        
            <img src="https://i.ibb.co/34S4L8B/image-placeholder.jpg" alt="image-placeholder"/>
        
        <div class="etude-card__title">
            THIS A VERY MUCH LONGER EVENT TITLE CAUSING PROBLEMS
        </div>
        <div class="etude-card__ufc">TAG 1</div>
        <div class="etude-card__cost">TAG 2</div>
        <div class="etude-card__date">
            Place
        </div>
        <div class="etude-card__date">
            Time
        </div>
        <span class="btn--primary">
            See details
        </span>
    </a>
</div>
<div id="hs_cos_wrapper_widget_1551887999614" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><!-- custom widget definition not found --></div>
<div id="hs_cos_wrapper_widget_1551888011972" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><!-- custom widget definition not found --></div>
<div id="hs_cos_wrapper_widget_1551888047237" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module">
    <a href="https://codepen.io/" class="etude-card">
        
            <img src="https://i.ibb.co/34S4L8B/image-placeholder.jpg" alt="image-placeholder"/>
        
        <div class="etude-card__title">
            THIS IS EVENT TITLE
        </div>
        <div class="etude-card__cost">TAG 2</div>
        <div class="etude-card__date">
            Place
        </div>
        <div class="etude-card__date">
            Time
        </div>
        <span class="btn--primary">
            See details
        </span>
    </a>
</div>
</section>



Answered By - Amaury Hanser
Answer Checked By - Marie Seifert (PHPFixing Admin)

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...