CODEWITHSUNDEEP
htmlcssresponsive-designsass
Ben C.
Ben C.

Reputation: 39

responsive design using css3

I am trying to using media queries. I have included meta name="viewport" content="width=device-width, initial-scale=1"> in my head and @media (min-width: 768px) { background-color: red; } in my css. Is there something I am missing because this does not work.

Upvotes: 2

Views: 52

Answers (2)

jswebb
jswebb

Reputation: 537

You tagged this as utilizing SASS as well as responsive design, so I think it's appropriate to offer a more elaborate, SASS-oriented answer, in case other people have related questions in the future.

First off, everything @migli said was spot on - you have to make sure that you are targeting a specific DOM element to style in your CSS. One of the major benefits of using SASS is that it allows you to keep your code DRY, and creating breakpoints makes writing media queries super simple.

To do so, set up a @mixin that establishes your specific breakpoint thresholds (e.g. here is a easy-to-follow general-purpose example by Tim Knight: 

@mixin breakpoint($class) {
  @if $class == xs {
    @media (max-width: 767px) { @content; }
  }

  @else if $class == sm {
    @media (min-width: 768px) { @content; }
  }

  @else if $class == md {
    @media (min-width: 992px) { @content; }
  }

  @else if $class == lg {
    @media (min-width: 1200px) { @content; }
  }
}

Now, as you're editing your SASS files, you can compartmentalize your code, to keep it DRY. For example, the following SASS: 

body {
  height: 100%;
  width: 100%;
  font-size: 1.8em;
  @include breakpoint(md) {
    font-size: 1.5em;
  }
}

outputs 

body {
  height: 100%;
  width: 100%;
  font-size: 1.8em;
}  

@media (min-width: 992px) {
  body {
    font-size: 1.5em;
  }

This is a small example, but as the size and scope of your project grows, saving keystrokes and improving readability will greatly enhance your productivity (and sanity!).

Upvotes: 0

migli
migli

Reputation: 3262

Your media query is ok, but your background-color is just a CSS property, you have to specify which element is concerned:

@media (min-width: 768px) {
    html, body {
        background-color: red;
    }
}

Upvotes: 1

Related Questions