Using Media Queries with Class Names to Change Website Width

css, media-queries

Solution

Something like this?

@media (max-width: 767px) {
  .classname {
    width: 80%;
  }
}

@media (max-width: 480px) {
  .classname {
    width:100%;
  }
}

Note that the media query with the smaller `max-width` is set last to allow it to override the media query with the larger `max-width`.

See this article for more on using media queries.

Problem

I have a mobile application that I want to blow up full-screen. Twitter Bootstrap gives me the size for phones, tablets, and all that information. I would like a CSS class to handle all of the different types of sizes. I'm looking for something like this: ``` @media (max-width: 480px) classname @media (max-width: 767px) classname ``` etc

Original source