[Solved] Can someone help me transform this code to responsive code? [closed]

Question

The simplest implementation of media queries would be to put something like this at the bottom of the css that you submitted:

@media screen and (max-width: 767px){
  /* YOUR STYLES GO HERE.
   * You can now use the exact selectors you use above,
   * and when the screen is under 767px wide (such as most phones)
   * this CSS will render, rather than the previous code.
  */
}

Also don’t forget the meta viewport header.

Ultimately, you will have to choose device widths that you want to break at.

You will also need to figure out what you want to be different on different browsers.

Also, don’t forget to test in browsers.

For a good comprehensive primer on the core techniques of responsive, check out google’s overview.

Accepted Answer