Question 44079 in Html Question posted in
Some basic documentation can be found here.

Align cards with CSS – Html

I am learning CSS/HTML5. I want to put in a grid of 2 rows x 2 columns these 4 cards, I want make this page responsive the four cards distribuited in the screen when open in mobile :

enter image description here

Here is my html code of frotaDan.html :

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8" />
 <title>Frota Daniel</title>
 <link href="css/main.css" rel="stylesheet" />
 </head>
 <body>
 <div class="reja">
 <section>
    <div class="card">
        <h2>Free Willy</h2>
        <div class="card-image boat1"></div>
         <p>Lancha de 38 pés convertida para pescaria em alto mar. 
             </p>
         <a href="#">Agenda</a>
     </div>
     <div class="card">
        <h2>Yu</h2>
        <div class="card-image boat2"></div>
         <p>Barco robaleiro de 7 metros, com Painel na popa,
             projetado para até 4 pescadores + guia.
             </p>
         <a href="#">Agenda</a>
     </div>
     <div class="card">
        <h2>Xalana</h2>
        <div class="card-image boat3"></div>
         <p>Barco robaleiro de 7 metros, com Painel na popa, 
            projetado para até 4 pescadores + guia.
         </p>
         <a href="#">Agenda</a>
     </div>
     <div class="card">
        <h2>Victory</h2>
        <div class="card-image boat4"></div>
         <p>26 pés ,painel e controle central, 
            com espaço para pesca em volta do barco todo, 
        </p>
            <a href="#">Agenda</a>
     </div>
 
     </section>
     </div>
     </body>

And this is the main.css:

 *{ box-sizing:border-box; padding: 0; margin:0; }

 body { background: rgb(27, 27, 27); }

 .container {    display:flex; justify-content: center;  }

 .card { background: white; width: 500px; height: 600px; margin: 10px; 
    border-radius: 15px;  align-items: center; text-align: center; display: 
  inline-block;          }

.card:hover { background-color: black; color: white; cursor:pointer; 
          transform : scale(1.03); transition : all in ease;
 }


 .card-image { background-color: aqua; height: 150px; margin-bottom: 15px; 
 background-size: cover; }

.boat1 { background-image: url('../img/FreeWilly/FreeWi3mini.jpg');  }

.boat2 { background-image: url('../img/Xu/X4Mini.jpg');  }

.boat3 { background-image: url('../img/xalana.jpeg');  }

.boat4 { background-image: url('../img/Victorymini.jpg');  }

.card a { background-color: black; color:white; padding: 15px 20px; 
     display:block; text-align: center; margin: 20px 50px;   }
.reja { display:  grid;}

I have tryed many propierties in CSS to order this cards.
thanks in advance
Alejandro

Tags:

2

Answers


  1. 0

    I used display:flex. try it out and see if you like it.

    <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8" />
 <title>Frota Daniel</title>
 <link href="css/main.css" rel="stylesheet" />
 </head>
    
  <style>
     *{ box-sizing:border-box; padding: 0; margin:0; }

 body { background: rgb(27, 27, 27); }

 .container {    display:flex; justify-content: center;  }

 .card { background: white; width: 500px; height: 600px; margin: 10px; 
    border-radius: 15px;  align-items: center; text-align: center; display: 
  inline-block;          }

.card:hover { background-color: black; color: white; cursor:pointer; 
          transform : scale(1.03); transition : all in ease;
 }


 .card-image { background-color: aqua; height: 150px; margin-bottom: 15px; 
 background-size: cover; }

.boat1 { background-image: url('../img/FreeWilly/FreeWi3mini.jpg');  }

.boat2 { background-image: url('../img/Xu/X4Mini.jpg');  }

.boat3 { background-image: url('../img/xalana.jpeg');  }

.boat4 { background-image: url('../img/Victorymini.jpg');  }

.card a { background-color: black; color:white; padding: 15px 20px; 
     display:block; text-align: center; margin: 20px 50px;   }
.reja { 
  max-width: 100%;
  height: 700px;
  border: 1px solid #c3c3c3;
  display: flex;
  justify-content: center;
overflow:auto;}
  </style>
    
 <body>
 <div class="reja">
 <section>
     <div class="card">
        <h2>Free Willy</h2>
        <div class="card-image boat1">             </div>
         <p>
         </p>
         <a href="#">Agenda</a>
     </div>
     
    <div class="card">
        <h2>Yu</h2>
        <div class="card-image boat2">            </div>
         <p>
         </p>
         <a href="#">Agenda</a>
     </div>
     
    <div class="card">
        <h2>Xalana</h2>
        <div class="card-image boat3">         </div>
         <p>
         </p>
         <a href="#">Agenda</a>
     </div>
     
    <div class="card">
        <h2>Victory</h2>
        <div class="card-image boat4">             </div>
         <p>
        </p>
            <a href="#">Agenda</a>
     </div>
 
     </section>
     
     </div>
     </body>
</html>
    Login or Signup to reply.
  2. 0

    You have a css rule for .container (defining the flex container), but there is no element in your HTML code which actually has that class…

    So – in the HTML code – add class="container" as an attribute to the section element, and then – in CSS – move align-items: center; from the rule for .card (= flex items) to the .container rule (flex container).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search