Responsive Website Design – No Media Queries

By Raddy in CSS ·

Learn a new technique that allows you to do responsive website layouts without using media queries. This technique can be very useful and it’s worth knowing as it can save you time and extra unnecessarily code.

And here is the code from the video:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>No Media Queries</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>

    <div class="wrapper">
        <ul class="responsive-grid">
            <li>Card 1</li>
            <li>Card 2</li>
            <li>Card 3</li>
            <li>Card 4</li>
            <li>Card 5</li>
            <li>Card 6</li>
            <li>Card 7</li>
            <li>Card 8</li>
            <li>Card 9</li>
            <li>Card 10</li>
        </ul>
    </div>

</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');

body {
    background-color: #e2e1e0;
    font-family: 'Roboto', sans-serif;
}

ul {
    padding: 0;
}

.wrapper {
    max-width: 85em; /*1366px*/
    margin-left: auto;
    margin-right: auto;
}


@supports (display: grid) {
    .responsive-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        grid-gap: 2rem;
    }
    
    .responsive-grid li {
        background-color: #fff;
        border-radius: 2px;
        height: 240px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }
}

Leave a Reply

Your email address will not be published. Required fields are marked *