Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • 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

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>

[CODE lang="css" title="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;




}
[/CODE]


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
Sort by date Sort by votes
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:
Upvote 0 Downvote
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.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom