Skip to content
Submitted over 3 years ago

Four Card Section

Monzer•20
@monzer10
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

is there a better way to use css grid??

Community feedback

  • Chamu•13,130
    @ChamuMutezvaPosted over 3 years ago
    • you have got everything figured out, but you need to change some few important things. Take note that the design sizes are to guide you and the rest is in your power to build a site that is viewable on most devices from the smallest to the largest.
    • using a mobile first approach the following media query @media (max-width: 375px) is not required. let it be part of your base styles .
    • the other media query @media (min-width: 376px) change it to kick in at a later stage like the code below. This is just for illustration you need to find your self a suitable breakpoint. It must be at the end of your base code
    @media (min-width: 980px) {  
    #main-header > h2 {
        font-size: 30px;
    }

    #main-header > p {
        width: 40%;
    }

    #main-container {
    width: 71%;
    height: 68%;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-areas: 
    "supervisor team-builder calculator"
    "supervisor karma calculator"
    ;
    margin-bottom: 3vh;
    }   
}
    • you will still need to find , how best to present devices that are less in the 600px to < 980px if necessary. it will be a simple query like @media (min-width: 600px)
    • wrap your content in a div , such that you can set a max width for the content to cater for large screens. Then in your css set max-width for .wrapper and add the css to keep it centered
    <body>
 <div class="wrapper">
// all content here
</div>
</body>
    Marked as helpful
    0
    Monzer•20
    @monzer10Posted over 3 years ago

    @ChamuMutezva Thanks!!! Your feedback is priceless.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord