htmlcssmedia-queriesresponsive

Trying to change max-width + display: grid in media query


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;
                }
            }
        }
    }