Recently I had a small problem where I could not move text to second column inside div. After some time someone helped me and I thought i could copy & paste that div and it would automatically move near it, unfortunately it moved under it, moreover I added margin-top so it would not be on the header. Can someone help me?
This is how it suppose to look
Here is the code:
plates {
display: grid;
grid-template-columns: 50% 50%;
border-radius: 20px;
width: 512px;
height: 300px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.courses{
margin-top:280px;
}
.course_icon {
width: 36px;
height: 36px;
}
.full_course {
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
text-align: center;
grid-column: 1 / -1;
}
.MathPhys{
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
text-align: center;
grid-column: 1 / -1;
}
.course {
font-family: 'Noto Sans', sans-serif;
font-weight: normal;
margin: 0rem 0rem;
display: flex;
align-items: center;
padding: 2px 40px;
}
.course h3 {
padding: 0rem 1rem;
}<div >
<div >
<div >
<div >
<h2>Full Course</h2>
</div>
<div >
<img src="Plate Icons/mathicon.png" alt="mth">
<h3>Mathematics</h3>
</div>
<div >
<img src="Plate Icons/his.png" alt="hi">
<h3>History</h3>
</div>
<div >
<img src="Plate Icons/chemis.png" alt="che">
<h3>Chemistry</h3>
</div>
<div >
<img src="Plate Icons/bio.png" alt="bi">
<h3>Biology</h3>
</div>
<div >
<img src="Plate Icons/en.png" alt="en">
<h3>English</h3>
</div>
<div >
<img src="Plate Icons/phys.png" alt="phy">
<h3>Physics</h3>
</div>
</div>
<div >
<div >
<div >
<h2>Math Physics</h2>
</div>
<div >
<img src="Plate Icons/mathicon.png" alt="mth">
<h3>Mathematics</h3>
</div>
<div >
<img src="Plate Icons/phys.png" alt="phy">
<h3>Physics</h3>
</div>
</div>
</div>
</div>CodePudding user response：
You could use a grid for the .container as well.
.container {
display: grid;
grid-template-columns: 50% 50%;
min-width: 1024px;
}
.plates {
display: grid;
grid-template-columns: 50% 50%;
border-radius: 20px;
width: 512px;
height: 300px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.courses {
margin-top: 280px;
}
.course_icon {
width: 36px;
height: 36px;
}
.full_course {
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
text-align: center;
grid-column: 1 / -1;
}
.MathPhys {
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
text-align: center;
grid-column: 1 / -1;
}
.course {
font-family: 'Noto Sans', sans-serif;
font-weight: normal;
margin: 0rem 0rem;
display: flex;
align-items: center;
padding: 2px 40px;
}
.course h3 {
padding: 0rem 1rem;
}<div >
<div >
<div >
<div >
<h2>Full Course</h2>
</div>
<div >
<img src="Plate Icons/mathicon.png" alt="mth">
<h3>Mathematics</h3>
</div>
<div >
<img src="Plate Icons/his.png" alt="hi">
<h3>History</h3>
</div>
<div >
<img src="Plate Icons/chemis.png" alt="che">
<h3>Chemistry</h3>
</div>
<div >
<img src="Plate Icons/bio.png" alt="bi">
<h3>Biology</h3>
</div>
<div >
<img src="Plate Icons/en.png" alt="en">
<h3>English</h3>
</div>
<div >
<img src="Plate Icons/phys.png" alt="phy">
<h3>Physics</h3>
</div>
</div>
</div>
<div >
<div >
<div >
<h2>Math Physics</h2>
</div>
<div >
<img src="Plate Icons/mathicon.png" alt="mth">
<h3>Mathematics</h3>
</div>
<div >
<img src="Plate Icons/phys.png" alt="phy">
<h3>Physics</h3>
</div>
</div>
</div>
</div>You were also missing a closing </div>
CodePudding user response：
you forgot a point for class selector
plates { -> .plates {
and put this css in the end:
this will create a grid for two columns (equal width for the )
and a gap of 1rem
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
then you have some missing closing divs :)
final risult
.plates {
display: grid;
grid-template-columns: 50% 50%;
border-radius: 20px;
width: 512px;
height: 300px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.course_icon {
width: 36px;
height: 36px;
}
.full_course {
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
text-align: center;
grid-column: 1 / -1;
}
.MathPhys {
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
text-align: center;
grid-column: 1 / -1;
}
.course {
font-family: 'Noto Sans', sans-serif;
font-weight: normal;
margin: 0rem 0rem;
display: flex;
align-items: center;
padding: 2px 40px;
}
.course h3 {
padding: 0rem 1rem;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div >
<div >
<div >
<div >
<h2>Full Course</h2>
</div>
<div >
<img src="Plate Icons/mathicon.png" alt="mth">
<h3>Mathematics</h3>
</div>
<div >
<img src="Plate Icons/his.png" alt="hi">
<h3>History</h3>
</div>
<div >
<img src="Plate Icons/chemis.png" alt="che">
<h3>Chemistry</h3>
</div>
<div >
<img src="Plate Icons/bio.png" alt="bi">
<h3>Biology</h3>
</div>
<div >
<img src="Plate Icons/en.png" alt="en">
<h3>English</h3>
</div>
<div >
<img src="Plate Icons/phys.png" alt="phy">
<h3>Physics</h3>
</div>
</div>
</div>
<div >
<div >
<div >
<h2>Math Physics</h2>
</div>
<div >
<img src="Plate Icons/mathicon.png" alt="mth">
<h3>Mathematics</h3>
</div>
<div >
<img src="Plate Icons/phys.png" alt="phy">
<h3>Physics</h3>
</div>
</div>
</div>
</div>
</body>
</html>