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);
}
}
Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
