CSS variable chapter six "Responsiveness and CSS variables" 🐌

Hello dear folks 👋

Hope you guys are learning🧞 something new and creative today.

In the last DEV post, we have learned about "how to control CSS variables with JavaScript"

CSS variable chapter five "how to change CSS variable value with JavaScript" 🔥️

🚩 Atul Prajapati 🇮🇳 ・ Mar 18 '21 ・ 2 min read

#css #codenewbie #todayilearned #codepen

In this post, we are going to learn about how we can use CSS variables smartly in responsiveness🍭

🌲So are you excited to learn how we can make changes in the responsive behavior of web page?

GIF

So let's do it🍦

Imagine that you have a grid of four products, two product columns in each row for desktop screen size. And we want to show only one product column in a single row in mobile screen size 💻

NOTE : Here I'm assuming that you have some basic knowledge about CSS grid.

If you don't know anything about CSS grid, I recommend this free CSS grid course by Per.

So this is our default screen for our grid of four products. 🎋

Now to make our product grid responsive according to the device screen. I mean to show only one product in one column.

So first of all I'm going to declare a global variable for the grid column-like.

.grid
{
     --product-column: 200px 200px;
}

And then we have to use this media query for our smartphone screen size.

@media all and (max-width: 450px)
{
    .grid
    {
        --product-column: 200px;
    }
}

🏆 Tadda, our responsive webpage according to all media screen.

So that's it for this Dev post 😉, in the next chapter we will learn about inheritance example of CSS variable. So stay tuned 🔔️