DEV Community

Cover image for CSS variable chapter six "Responsiveness and CSS variables" ๐ŸŒ
Atul Prajapati
Atul Prajapati

Posted on

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"

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?

Are you ready

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;
}
Enter fullscreen mode Exit fullscreen mode

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

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

๐Ÿ† 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 ๐Ÿ””๏ธ

Discussion (0)