How should i use media querys correctly?-CodePudding

I have the content of my page wrapped inside a mycontainer div. The stuff should be aligned in the center of the page using a big device and left when using a small device.

I defined a margin and the with of the container, which works flawless on the desktop. However the media query is not used on smartphones. Where is my mistake?

.mycontainer {
  margin: 0 auto;
  width:50%;

  @media only screen and (max-width: 767) {
    margin:0 auto;
    width:100%;
  }
}

Edit: deleting margin: 0 auto in the media query does not change anything

CodePudding user response：

@media ... should be on the root level. You'll see @media queries used within selectors like you have it above, but that is only possible within CSS pre-processors like Sass. The correct way in plain CSS is as follows:

.mycontainer{
      margin: 0 auto;
      width:50%;
}

@media only screen and (max-width: 767px) {
   .mycontainer{
        margin:0 auto;
        width:100%;
    }
}

CodePudding user response：

You must have to mention proper size.

.mycontainer{
      margin: 0 auto;
      width:50%;

      @media only screen and (max-width: 767px) {
        margin:0 auto;
        width:100%;
      }
}