• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS I need help with a Card alignment for a product card.

Cyrill

New Coder
Hey People. I'm at scripting a Website for my Mom.
I've got the problem that my cards don't have the same heights because of the different lengths of the product description.

Are you able to help me out? I'd be really glad :)


HTML:
<section id="work">
    
    <div class="section_title">
      <h3>Galerie</h3>
      <p class="section_subtitle">Meine Arbeit</p>
    </div>
    
    <div class="card">
        <img src="../../img/Angebote/Cards/Fusspflege/pediohne.svg" alt="Avatar" style="width:100%">
        <div class="container">
          <h4><b>Pedicure ohne Lack</b></h4>
          <p>Nägel in Form schneiden und feilen, Nagelhäutchen und Hornhaut entfernen, Nagelfalz
            reinigen, Fussmassage </p>
            <b>(Dauer ca. 1 h) CHF 85</b>



        </div>
    </div>
      
      <div class="card">
        <img src="../../img/Angebote/Cards/Fusspflege/pedimitlack.svg" alt="Avatar" style="width:100%">
        <div class="container">
          <h4><b>Pedicure mit Lack</b></h4>
          <p>Nagellack entfernen, Nägel in Form schneiden und feilen, Nagelfalz reinigen, Nagelhäutchen
            und Hornhaut entfernen, Nägel lackieren, Fussmassage </p>

           <b>(Dauer ca. 1 1/4h) CHF 90</b>
        </div>
      </div>
      
      
      <div class="card">
        <img src="../../img/Angebote/Cards/Fusspflege/pedigellack.svg" alt="Avatar" style="width:100%">
        <div class="container">
            <h4><b>Pedicure mit Gel-Lack</b></h4>
            <p>Nagellack entfernen, Nägel in Form schneiden und feilen, Nagelfalz reinigen, Nagelhäutchen
                und Hornhaut entfernen, Nägel mit Gel- Lack lackieren, Fussmassage </p>
             <b>(Dauer ca. 1.5h) CHF 105</b>
          </div>
        </div>
      
      <div class="card">
        <img src="../../img/Angebote/Cards/Fusspflege/pedimonsieur.svg" alt="Avatar" style="width:100%">
        <div class="container">
            <h4><b>Pedicure Monsieur</b></h4>
            <p>Nägel in Form schneiden und feilen, Nagelfalz reinigen, Nagelhäutchen und Hornhaut
                entfernen, Fussmassage  </p>
             <b>(Dauer ca. 1h)
                CHF 85</b>
          </div>
        </div>
          

      <div class="card">
        <img src="../../img/Angebote/Cards/Fusspflege/lackierungmitundohne.svg" alt="Avatar" style="width:100%">
        <div class="container">
            <h4><b>Lackierung</b></h4>
             <p>Nagellack <b>CHF 15</b></p>
             <p>Gel- Lack <b>CHF 30</b></p>
            </div>
        </div>
  </section>

CSS CODE:
/*Flashcard*/

.card {
    /* Add shadows to create the "card" effect */
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        transition: 0.3s;
        height: 20%;
        float: left;
        width: 30%;
        margin-right: 3.33%;
        margin-bottom: 10%;
        padding: 20px;
        padding-bottom: 5%;
        box-sizing: border-box;
      
    }


    .card_text {
        text-align: center;
        padding-bottom: 10%;
    }


  /* On mouse-over, add a deeper shadow */
  .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }

  .hide {
    display: none;
    font-size: 1rem;
  }
 
  .myDIV:hover + .hide {
    display: block;
    color: black;
  }

  .myDIV {
      color: #02365E;
      font-size: 1.1rem;
      padding-bottom: 1rem;
  }

 
  /* Add some padding inside the card container */
  .container {
    padding: 2px 16px;
    align-content: center;
    
 

    
  }


Thx for helping out :)
 

Attachments

  • Bildschirmfoto 2020-09-25 um 18.06.52.png
    Bildschirmfoto 2020-09-25 um 18.06.52.png
    162.7 KB · Views: 7

edenwax

Active Coder
Pro-tip: try not to use CSS floats as there are much better options available now like Flexbox and Grid.

I think I was able to get what you were asking for using flexbox:

HTML:
    <section id="work">
        <div class="section_title">
            <h3>Galerie</h3>
            <p class="section_subtitle">Meine Arbeit</p>
        </div>
        <div class="card-wrapper">
            <div class="card">
                <img alt="Avatar" src="../../img/Angebote/Cards/Fusspflege/pediohne.svg" style="width:100%">
                <div class="container">
                    <h4><b>Pedicure ohne Lack</b></h4>
                    <p>Nägel in Form schneiden und feilen, Nagelhäutchen und Hornhaut entfernen, Nagelfalz reinigen, Fussmassage</p><b>(Dauer ca. 1 h) CHF 85</b>
                </div>
            </div>
            <div class="card">
                <img alt="Avatar" src="../../img/Angebote/Cards/Fusspflege/pedimitlack.svg" style="width:100%">
                <div class="container">
                    <h4><b>Pedicure mit Lack</b></h4>
                    <p>Nagellack entfernen, Nägel in Form schneiden und feilen, Nagelfalz reinigen, Nagelhäutchen und Hornhaut entfernen, Nägel lackieren, Fussmassage</p><b>(Dauer ca. 1 1/4h) CHF 90</b>
                </div>
            </div>
            <div class="card">
                <img alt="Avatar" src="../../img/Angebote/Cards/Fusspflege/pedigellack.svg" style="width:100%">
                <div class="container">
                    <h4><b>Pedicure mit Gel-Lack</b></h4>
                    <p>Nagellack entfernen, Nägel in Form schneiden und feilen, Nagelfalz reinigen, Nagelhäutchen und Hornhaut entfernen, Nägel mit Gel- Lack lackieren, Fussmassage</p><b>(Dauer ca. 1.5h) CHF 105</b>
                </div>
            </div>
            <div class="card">
                <img alt="Avatar" src="../../img/Angebote/Cards/Fusspflege/pedimonsieur.svg" style="width:100%">
                <div class="container">
                    <h4><b>Pedicure Monsieur</b></h4>
                    <p>Nägel in Form schneiden und feilen, Nagelfalz reinigen, Nagelhäutchen und Hornhaut entfernen, Fussmassage</p><b>(Dauer ca. 1h) CHF 85</b>
                </div>
            </div>
            <div class="card">
                <img alt="Avatar" src="../../img/Angebote/Cards/Fusspflege/lackierungmitundohne.svg" style="width:100%">
                <div class="container">
                    <h4><b>Lackierung</b></h4>
                    <p>Nagellack <b>CHF 15</b></p>
                    <p>Gel- Lack <b>CHF 30</b></p>
                </div>
            </div>
        </div>
    </section>

CSS:
/*Flashcard*/
.card-wrapper {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    align-items: stretch;
}
.card-wrapper:after { /* THIS IS OPTIONAL */
    content: "";      /* THIS IS OPTIONAL */
    flex: auto;       /* THIS IS OPTIONAL */
}                     /* THIS IS OPTIONAL */
.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 30%;
    margin-right: 3.33%;
    margin-bottom: 10%;
    padding: 20px;
    padding-bottom: 5%;
    box-sizing: border-box;
}
.card_text {
    text-align: center;
    padding-bottom: 10%;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.hide {
    display: none;
    font-size: 1rem;
}
.myDIV:hover + .hide {
    display: block;
    color: black;
}
.myDIV {
    color: #02365E;
    font-size: 1.1rem;
    padding-bottom: 1rem;
}
/* Add some padding inside the card container */
.container {
    padding: 2px 16px;
    align-content: center;
}

1601057206059.png
 
Last edited:

Malcolm

Administrator
Administrator
Verified
Hi there!

I have changed the thread to a question-based thread, which gives you the option to mark something as the solution.

Also, just like @edenwax mentioned floats are not ideal for layouts. Floats are better positioning images within the text etc.
 
Top Bottom