im building this small page mobile first, which works. however, on full page i want to change the max width of my heading, and change the card-container to display: grid as i want to position them differently. But it doesnt work and i dont know why it doesnt. does anyone have an idea?
Here is my git: https://github.com/gajbos99/four-card-feature-section.git, i will show the page here aswell.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="stylesheet" href="./css/styles.css">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Four card feature section</title>
<!-- Feel free to remove these styles or customise in your own stylesheet đź‘Ť -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<main>
<section class="heading">
<h1>Reliable, efficient delivery</h1>
<h1 class="tech">Powered by Technology</h1>
<p>
Our Artificial Intelligence powered tools use millions of project data points
to ensure that your project is successful
</p>
</section>
<section class="cards-container">
<div class="card light-blue">
<h2>Supervisor</h2>
<p>Monitors activity to identify project roadblocks</p>
<img src="./images/icon-supervisor.svg" alt="Icon showing a blue magnifying glass, with an eye inside of it.">
</div>
<div class="card red">
<h2>Team Builder</h2>
<p>Scans our talent network to create the optimal team for your project</p>
<img src="./images/icon-team-builder.svg" alt="Icon showing a desktop with a red house in front of it">
</div>
<div class="card yellow">
<h2>Karma</h2>
<p>Regularly evaluates our talent to ensure quality</p>
<img src="./images/icon-karma.svg" alt="Icon which shows a lightbulb that is glowing">
</div>
<div class="card blue">
<h2>Calculator</h2>
<p>Uses data from past projects to provide better delivery estimates</p>
<img src="./images/icon-calculator.svg" alt="Icon with screen and some blue colored data on it">
</div>
</section>
</main>
</body>
</html>
SCSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
// Variables
$poppins: "Poppins", sans-serif;
$red: hsl(0, 78%, 62%);
$cyan: hsl(180, 62%, 55%);
$orange: hsl(34, 97%, 64%);
$blue: hsl(212, 86%, 64%);
// Neutral
$very-dark-blue: hsl(234, 12%, 34%);
$grayish-blue: hsl(229, 6%, 66%);
$very-light-gray: hsl(0, 0%, 98%);
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 10px;
}
body {
font-size: 1.3rem;
min-height: 100svh;
font-family: $poppins;
background-color: $very-light-gray;
}
main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-left: 32px;
padding-right: 32px;
padding-top: 85px;
.heading {
max-width: 311px;
text-align: center;
padding-bottom: 7.6rem;
h1 {
font-size: clamp(2.4rem, 2vw + 1.1rem, 3.6rem);
letter-spacing: 0.17px;
font-weight: 200;
color: $very-dark-blue;
}
.tech{
font-weight: 600;
padding-top: 1px;
}
p {
padding-top: 1.6rem;
font-weight: 400;
color: $very-dark-blue;
font-size: 1.5rem;
line-height: 25px;
letter-spacing: 0.1px;
opacity: 50%;
}
}
.cards-container {
display: flex;
flex-direction: column;
gap: 2.5rem;
padding-bottom: 78px;
.light-blue {
border-top: 4px solid $cyan;
}
.red {
border-top: 4px solid $red;
}
.yellow {
border-top: 4px solid $orange;
}
.blue {
border-top: 4px solid $blue;
}
.card {
display: flex;
flex-direction: column;
background-color: white;
padding: 2.8rem;
max-width: 311px;
border-radius: 8px;
h2 {
font-size: 2.0rem;
line-height: auto;
font-weight: 600;
}
p {
font-size: 1.3rem;
line-height: 23px;
letter-spacing: 0.09px;
color: $very-dark-blue;
opacity: 50%;
font-weight: regular;
padding-bottom: 3.3rem;
}
img {
width: 57px;
height: 57px;
align-self: flex-end;
}
}
}
}
// Media queries
@media (min-width: 768px) {
.heading {
max-width: 540px;
}
.cards-container {
display: grid;
grid-template-rows: repeat(6, 1fr);
}
}
I tried using max-width on my heading, and display: grid on my cards-container, but it does not work.
>Solution :
You can move your media query inside the initial .header and cards-container class thus:
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
// Variables
$poppins: "Poppins", sans-serif;
$red: hsl(0, 78%, 62%);
$cyan: hsl(180, 62%, 55%);
$orange: hsl(34, 97%, 64%);
$blue: hsl(212, 86%, 64%);
// Neutral
$very-dark-blue: hsl(234, 12%, 34%);
$grayish-blue: hsl(229, 6%, 66%);
$very-light-gray: hsl(0, 0%, 98%);
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 10px;
}
body {
font-size: 1.3rem;
min-height: 100svh;
font-family: $poppins;
background-color: $very-light-gray;
}
main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-left: 32px;
padding-right: 32px;
padding-top: 85px;
.heading {
max-width: 311px;
text-align: center;
padding-bottom: 7.6rem;
// Media query
@media (min-width: 768px) {
max-width: 540px;
}
h1 {
font-size: clamp(2.4rem, 2vw + 1.1rem, 3.6rem);
letter-spacing: 0.17px;
font-weight: 200;
color: $very-dark-blue;
}
.tech{
font-weight: 600;
padding-top: 1px;
}
p {
padding-top: 1.6rem;
font-weight: 400;
color: $very-dark-blue;
font-size: 1.5rem;
line-height: 25px;
letter-spacing: 0.1px;
opacity: 50%;
}
}
.cards-container {
display: flex;
flex-direction: column;
gap: 2.5rem;
padding-bottom: 78px;
// Media query
@media (min-width: 768px) {
display: grid;
grid-template-rows: repeat(6, 1fr);
}
.light-blue {
border-top: 4px solid $cyan;
}
.red {
border-top: 4px solid $red;
}
.yellow {
border-top: 4px solid $orange;
}
.blue {
border-top: 4px solid $blue;
}
.card {
display: flex;
flex-direction: column;
background-color: white;
padding: 2.8rem;
max-width: 311px;
border-radius: 8px;
h2 {
font-size: 2.0rem;
line-height: auto;
font-weight: 600;
}
p {
font-size: 1.3rem;
line-height: 23px;
letter-spacing: 0.09px;
color: $very-dark-blue;
opacity: 50%;
font-weight: regular;
padding-bottom: 3.3rem;
}
img {
width: 57px;
height: 57px;
align-self: flex-end;
}
}
}
}