How to get a div to only allow 2 widths

Question

I have website that with several divs. One of those divs need to be a specific with but this can variabate between 2 width. Is it possible some how to get it to only allow 2 width?

Examaple:

With resolution of page >= 700px  div width = 500px   
when page resolution < 700px  div width = 200px

possible duplicate of [Media Queries: How to target desktop, tablet and mobile?](http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) — Zword, Jan 02 '15 at 10:42

sanoj lawrence · Accepted Answer · 2015-01-02T10:56:00.527

Use css media query like @media only screen and (max-width: 300px)

when you add

@media screen and (max-width: 300px) {
        body {
            background-color: lightblue;
        }

When you add like this when width is 300px it will automatically change to rule you added

A simple example

   <!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: lightgreen;
}

@media screen and (max-width: 300px) {
    body {
        background-color: lightblue;
    }
}
</style>
</head>
<body>

<p>Resize the browserwindow. When the width of this document is less than 300 pixels, the background-color is "lightblue", otherwise it is "lightgreen".</p>

</body>
</html>

Answer

@media screen and (max-width: 700px  ) {
            div{
                width: 500px;
            }

@media screen and (min-width: 700px  ) {
            div{
                width: 200px;
            }

Your solution is incorrect (it says `width:200px` for both) – TheIronDeveloper Jan 02 '15 at 10:50 — TheIronDeveloper, Jan 02 '15 at 10:50
Your snippet, for me, never goes 'lightblue' – jbutler483 Jan 02 '15 at 10:54 — jbutler483, Jan 02 '15 at 10:54

score 1 · Answer 2 · answered Jan 02 '15 at 10:41

1

Use media queries:

@media only screen and (min-width: 700px) {
    .my-div {
        width: 500px;
    }
}

answered Jan 02 '15 at 10:41

jeremyb

470
4
12

How to get a div to only allow 2 widths

2 Answers2

A simple example

Answer