Media Queries in Grid
In this instructional exercise, we will figure out how to utilize media questions in the matrix designs to make a site responsive.
We will utilize the idea of media questions which we have as of now examined in the last Exercises. In the wake of applying the media inquiries, we will check if those are material by adding various tones -
@media only screen and (max-width:300px) {
body {
background-color: red;
}
}
@media only screen and (min-width: 300px) and (max-width:500px) {
body {
background-color: blue;
}
}
@media (min-width: 500px) and (max-width:800px) {
body {
background-color: yellow;
}
}
@media (min-width: 800px) {
body {
background-color: green;
}
}
The consequence of the above code will be, the shade of the screen will consequently change contingent on the screen size. It implies the media queries are working.
Presently we will add the HTML code to get everything rolling -
<body>
<div class="container ">
<nav class="border-now">
<span>Home</span>
<span>About Us</span>
<span>Contact Us</span>
</nav>
<section class="border-now">
<h1>Learn More</h1>
</section>
<aside class="border-now">
<h1>More About Us</h1>
</aside>
</div>
<footer class="border-now">Copyright © 2021</footer>
</body>
Presently we will give the lattice property to the part and a matrix hole to it as follows-
.container {
display: grid;
grid-gap: 1vw;
}
Likewise, we will give boundary, padding, and background color to it as displayed below
.border-now {
border: 2px solid black;
padding: 10px 23px;
background-color: wheat;
}
Presently we will add the grid format region property to the compartment and characterize the property grid region to nav, segment, aside, and footer -
grid-template-areas:
'navbar navbar navbar navbar'
'section section section aside'
'footer footer footer footer ';
nav {
grid-area: navbar;
}
section {
grid-area: section;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
text-align: center;
}
Presently to make it responsive, we need to alter the compartment when the site is between 500px to 800px -
.container {
grid-template-areas:
'navbar navbar navbar navbar'
'section section section section'
'aside aside aside aside'
'footer footer footer footer ';
}
Presently when the screen size goes between 300px to 500px, we need to again alter the holder to make it responsive -
.container {
grid-template-areas:
'navbar navbar navbar navbar'
'section section section section'
'aside aside aside aside'
'footer footer footer footer ';
}
Assuming we need to eliminate the aside label when the screen size is between 300-500 pixels, we can set the property show as none -
aside{
display: none;
}
With media inquiries, you are equipped for building any site of your decision. Consequently, you should perform more of these media inquiries and assemble your expert site to get the order over them.
0 Comments