How can I separate the cards in my project; I am new to HTML and am still learning so I don't know how to do this. I don't like how the cards are right up next to each other; is there any way I can fix this?
Here is my code:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height:65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center; /* Added */
flex-wrap:wrap;
}
.gameshell{
height:65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center; /* Added */
flex-wrap:wrap;
}
.card {
display: inline-block;
width: 200px;
height: 160px;
border: 1px solid #EF9A9A;
border-radius: 4px;
margin: 5px;
text-decoration: none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 24px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 36px!Important;
color: #D32F2F;
margin-bottom: 5px;
}
.main-description {
color: #D32F2F;
font-size: 24px;
text-align: center;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}<!DOCTYPE html>
<head>
<link rel="icon" type="png" href="/images/icon.png"/>
<meta charset="utf-8"/>
<title>Project-LuLo</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div >
<a href="#home" >Project-LuLo</a>
<div >
<a href="#home">Home</a>
<a href="#games">Games</a>
<a href="#contact">Contact</a>
</div>
</div>
<div >
<a href="#test">
<div >place_holder</div>
<div >
<i >null</i>
<div >place_holder</div>
</div>
</a>
<a href="#test">
<div >place_holder</div>
<div >
<i >null</i>
<div >place_holder</div>
</div>
</a>
<a href="#test">
<div >place_holder</div>
<div >
<i >null</i>
<div >place_holder</div>
</div>
</a>
<a href="#test">
<div >place_holder</div>
<div >
<i >null</i>
<div >place_holder</div>
</div>
</a>
<a href="#test">
<div >place_holder</div>
<div >
<i >null</i>
<div >place_holder</div>
</div>
</a>
<a href="#test">
<div >place_holder</div>
<div >
<i >null</i>
<div >place_holder</div>
</div>
</a>
</div>
</body>
</html>CodePudding user response：
There is a lot of duplicated and unnecessary code. Try removing it.
To increase the gap between div elements you can use the gap property.
Check out the docs here.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height: 65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center;
/* Added */
flex-wrap: wrap;
}
.gameshell {
height: auto;
justify-content: center;
display: flex;
gap: 1rem;
/*newly added*/
margin: 5px 20px;
align-items: center;
/* Added */
flex-wrap: wrap;
}
.card {
display: inline-block;
width: 200px;
height: 160px;
border: 1px solid #EF9A9A;
border-radius: 4px;
margin: 5px;
text-decoration: none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 24px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 36px!Important;
color: #D32F2F;
margin-bottom: 5px;
}
.main-description {
color: #D32F2F;
font-size: 24px;
text-align: center;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}<div >
<a href="#home" >Project-LuLo</a>
<div >
<a href="#home">Home</a>
<a href="#games">Games</a>
<a href="#contact">Contact</a>
</div>
</div>
<div >
<a href="#test" >
<div >place_holder</div>
<div >
<i >null</i>
<div >place_holder</div>
</div>
</a>
<a href="#test" >
<div >place_holder</div>
<div >
<i >null</i>
<div >place_holder</div>
</div>
</a>
<a href="#test" >
<div >place_holder</div>
<div >
<i >null</i>
<div >place_holder</div>
</div>
</a>
<a href="#test" >
<div >place_holder</div>
<div >
<i >null</i>
<div >place_holder</div>
</div>
</a>
<a href="#test" >
<div >place_holder</div>
<div >
<i >null</i>
<div >place_holder</div>
</div>
</a>
<a href="#test" >
<div >place_holder</div>
<div >
<i >null</i>
<div >place_holder</div>
</div>
</a>
</div>CodePudding user response：
Try grid for making layouts like this, it comes quite handy.
But right now I am guessing you are learning flex.
There are two ways you can do this.
First: the flex way
gap: 10px;
the gap property is actually quite great. It works just like its literal meaning. It produces a gap between your flex childs, Horizontally and vertically too.
Second: the css way
.card{
margin: 10px; //quite simple actually :)
}
try gap though (works with grid too)