Make div wider when viewport get less wide

Question

Is it possible to make a DIV (set to width="40%") grow in width as the viewport (browser window) gets less wide?

I know that you can also use the 40vw, instead of 40%, to make the div scale down when viewport sizes down but I want the div to go wider when the viewport gets narrower.

thanks, Eddy

Answer 1

Yes you can!

There are these tools called media queries which help to re-work elements once a certain resolution or view-port has been reached.

Here is your typical meta-viewport tag. This sets the browser layout viewport relative to the css styling.

 <meta name="viewport" content="width=device-width">

Once you got that in..

        #div {
            // basic styles
        }

        @media all and (max-width: 600px) {
            #div {
                width: 40%;
                // extra styles for mobile
            }
        }

        @media all and (min-width: 600px) {
            #div {
                width: 60%;
                // extra styles for desktop
            }
        }