CODEWITHSUNDEEP
htmlcss
Gundam Meister
Gundam Meister

Reputation: 1495

Responsive select drop down box

HTML:

<select id="location" name="city">
    <option selected="selected" value="Los Angeles">Los Angeles</option>
    <option value="Houston">Houston</option>
    <option value="New York">New York</option>
</select>

CSS:

select{
    width: 100%;
    max-width: 600px !important;
}

The select box is not covering 100% of the div. If I change max-width to min-width, it works. However, as I shrink the browser window, the box will not shrink accordingly and extend out of the div. Any suggestion?

Upvotes: 2

Views: 12258

Answers (1)

rlb.usa
rlb.usa

Reputation: 15043

If you're doing responsive design, it's easiest to work with @media queries. You can change your CSS based on the size of the browser. What I wrote below probably isn't exactly what you want, but it's a good starting place.

@media all and (max-width: 600px){
  select {
     width: 100%; max-width: 100%;
  }
}

So the code basically says:

 When the badness will happen in the browser
    Adjust the code accordingly

There are other @media queries based on devices, min-width, etc. But this is where you start, and it's the bread and butter for responsive design.

Upvotes: 4

Related Questions