1

I'm started project without any frameworks to RWD. So I'm wonder about how to do that. I'm starting with this:

  1. Make layout for desktop without @media

  2. Think what is different on mobile devices etc.

  3. Make media queries for mobile devices and change only elements that are not fit to layout.

But I see that is not good way. My media query not overwrite normal css. Here's an example.

#navbar{
    position: absolute;
    top: 80px;

}
@media (max-width: 544px){
  #navbar{
  top:0px; // Not working of course
  }
   }

So how do you making responsive layout, can give me a path? Making all styles for each other breakpoints or what?

Karol Jankiewicz
  • 153
  • 1
  • 12
  • Possible duplicate of [Responsive design with media query : screen size?](http://stackoverflow.com/questions/21574881/responsive-design-with-media-query-screen-size) – Itay Gal Aug 30 '16 at 17:40
  • Your example works fine, in spite of the error in the css... Can you post a [mcve] that demonstrates the issue? – Mr Lister Aug 30 '16 at 18:41

1 Answers1

4

A much simpler way to do this would be a mobile-first approach. The following code shows how that could be done:

@media (min-width: 545px) {
    #navbar{
        top: 80px;
    }
}

That simplifies your code immensely. You may also want to look into one of the many responsive frameworks available such as Bootstrap. Hope this helps!

Connor Gurney
  • 372
  • 2
  • 12