Issue
In mobile view my grid items are resizing in a way that I don't want. (please look at the page resized to around 583px)
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 70px 10% 50px 10%;
font-family: Poppins, sans-serif;
color: #4E5060;
background-color: #FAFAFA;
display: grid;
justify-content: center;
}
header {
text-align: center;
margin-inline: auto;
width: 50%;
}
header h1 {
font-weight: 200;
margin-bottom: 20px;
}
p {
color: #A7A6AA;
}
header p {
margin-bottom: 50px;
}
.bold {
font-weight: bold;
}
.main-grid {
display: grid;
grid-template-columns: repeat(3, 350px);
grid-template-rows: repeat(4, .5fr);
gap: 30px;
}
.card {
background-color: #fff;
padding: 25px 35px;
height: 255px;
box-shadow: 0 10px 10px #ddd;
border-radius: 8px;
min-width: 350px;
max-width: 350px;
margin-inline: auto;
}
.card:nth-of-type(1) {
grid-row: 2/4;
border-top: 5px solid hsl(180, 62%, 55%);
}
.card:nth-of-type(2) {
grid-column: 2 / 3;
grid-row: 1 / 3;
border-top: 5px solid hsl(0, 78%, 62%);
}
.card:nth-of-type(3) {
grid-column: 2 / 3;
grid-row: 3 / 5;
border-top: 5px solid hsl(34, 97%, 64%);
}
.card:nth-of-type(4) {
grid-column: 3 / 4;
grid-row: 2 / 4;
border-top: 5px solid hsl(212, 86%, 64%);
}
.card h3 {
margin-bottom: 10px;
}
.card p {
font-size: 14px;
}
@media (min-width: 601px) and (max-width: 1200px) {
header {
width: 100%;
}
.main-grid {
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.card {
margin-inline: initial;
}
.card:nth-of-type(1) {
grid-column: 1;
grid-row: 1;
margin-left: auto;
}
.card:nth-of-type(2) {
grid-column: 2;
grid-row: 1;
}
.card:nth-of-type(3) {
grid-column: 1;
grid-row: 2;
margin-left: auto;
}
.card:nth-of-type(4) {
grid-column: 2;
grid-row: 2;
}
}
@media (max-width: 600px) {
.main-grid {
grid-template-columns: 1fr;
}
header {
width: 100%;
}
.card {
min-width: 350px;
max-width: initial;
}
.card:nth-of-type(1) {
grid-column: 1;
grid-row: 1;
}
.card:nth-of-type(2) {
grid-column: 1;
grid-row: 2;
}
.card:nth-of-type(3) {
grid-column: 1;
grid-row: 3;
}
.card:nth-of-type(4) {
grid-column: 1;
grid-row: 4;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Four card feature section</title>
</head>
<body>
<header>
<h1>Reliable, efficient delivery<br><span class="bold">Powered by Technology</span>
</h1>
<p>Our Artificial Intelligence powered tools use millions of project data points
to ensure that your project is successful</p>
</header>
<section class="main-grid">
<div class="card">
<h3>Supervisor</h3>
<p>Monitors activity to identify project roadblocks</p>
</div>
<div class="card">
<h3>Team Builder</h3>
<p>Scans our talent network to create the optimal team for your project</p>
</div>
<div class="card">
<h3>Karma</h3>
<p>Regularly evaluates our talent to ensure quality</p>
</div>
<div class="card">
<h3>Calculator</h3>
<p>Uses data from past projects to provide better delivery estimates</p>
</div>
</section>
</body>
</html>The second and fourth cards on the page are large like I want (and expect) while the other two are smaller. In other words it's not resizing evenly.
How can I get the behavior that I want of all 4 cards being the same width? (Grid does behave this way if you continue to shrink the viewport to 370px)
Also I have the media query set to 600px but I notice it is not changing until I resize my browser to around 450px? Does anyone know why that is?
Solution
On mobile view, your .card was affected by thismargin-inline: auto;.
I added this to to your mobile media query to fix the wrong sizing on mobile:
.card {
min-width: 350px;
max-width: initial;
margin-inline: 0;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 70px 10% 50px 10%;
font-family: Poppins, sans-serif;
color: #4E5060;
background-color: #FAFAFA;
display: grid;
justify-content: center;
}
header {
text-align: center;
margin-inline: auto;
width: 50%;
}
header h1 {
font-weight: 200;
margin-bottom: 20px;
}
p {
color: #A7A6AA;
}
header p {
margin-bottom: 50px;
}
.bold {
font-weight: bold;
}
.main-grid {
display: grid;
grid-template-columns: repeat(3, 350px);
grid-template-rows: repeat(4, .5fr);
gap: 30px;
}
.card {
background-color: #fff;
padding: 25px 35px;
height: 255px;
box-shadow: 0 10px 10px #ddd;
border-radius: 8px;
min-width: 350px;
max-width: 350px;
margin-inline: auto;
}
.card:nth-of-type(1) {
grid-row: 2/4;
border-top: 5px solid hsl(180, 62%, 55%);
}
.card:nth-of-type(2) {
grid-column: 2 / 3;
grid-row: 1 / 3;
border-top: 5px solid hsl(0, 78%, 62%);
}
.card:nth-of-type(3) {
grid-column: 2 / 3;
grid-row: 3 / 5;
border-top: 5px solid hsl(34, 97%, 64%);
}
.card:nth-of-type(4) {
grid-column: 3 / 4;
grid-row: 2 / 4;
border-top: 5px solid hsl(212, 86%, 64%);
}
.card h3 {
margin-bottom: 10px;
}
.card p {
font-size: 14px;
}
@media (min-width: 601px) and (max-width: 1200px) {
header {
width: 100%;
}
.main-grid {
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.card {
margin-inline: initial;
}
.card:nth-of-type(1) {
grid-column: 1;
grid-row: 1;
margin-left: auto;
}
.card:nth-of-type(2) {
grid-column: 2;
grid-row: 1;
}
.card:nth-of-type(3) {
grid-column: 1;
grid-row: 2;
margin-left: auto;
}
.card:nth-of-type(4) {
grid-column: 2;
grid-row: 2;
}
}
@media (max-width: 600px) {
.main-grid {
grid-template-columns: 1fr;
}
header {
width: 100%;
}
.card {
min-width: 350px;
max-width: initial;
margin-inline: 0;
}
.card:nth-of-type(1) {
grid-column: 1;
grid-row: 1;
}
.card:nth-of-type(2) {
grid-column: 1;
grid-row: 2;
}
.card:nth-of-type(3) {
grid-column: 1;
grid-row: 3;
}
.card:nth-of-type(4) {
grid-column: 1;
grid-row: 4;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Four card feature section</title>
</head>
<body>
<header>
<h1>Reliable, efficient delivery<br><span class="bold">Powered by Technology</span>
</h1>
<p>Our Artificial Intelligence powered tools use millions of project data points
to ensure that your project is successful</p>
</header>
<section class="main-grid">
<div class="card">
<h3>Supervisor</h3>
<p>Monitors activity to identify project roadblocks</p>
</div>
<div class="card">
<h3>Team Builder</h3>
<p>Scans our talent network to create the optimal team for your project</p>
</div>
<div class="card">
<h3>Karma</h3>
<p>Regularly evaluates our talent to ensure quality</p>
</div>
<div class="card">
<h3>Calculator</h3>
<p>Uses data from past projects to provide better delivery estimates</p>
</div>
</section>
</body>
</html>Now your grid elements will be at the same size, and if you want to change the size of them you can change the margin-inline property (For example margin-inline: 5px)
Answered By - Tamir Abutbul
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.