Responsive Website Design – No Media Queries
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);
}
}
Support This Work
If you found this guide helpful, consider supporting me with a small donation. Your contribution helps me keep these tutorials up to date and create more quality content.
Scan to donate
Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
