0

I am trying to design for 3 different views, iphone, tablet and desktop. This is my media query.

@media only screen and (min-width: 320px) {
  **mobile/iphone style**
}

@media only screen and (min-width: 768px) {
  **tablet style**
}

@media only screen and (min-width: 992px) {
 ** desktop/bigger screens **
}

So I started with mobile view and everything is fine. Then I am now styling tablet and everything I did on mobile view is being carried over in my tablet view. For example, I set padding somewhere in mobile view and the padding is screwing with my tablet view. I am not sure what I am doing wrong. I might have more problems later on when I start working on the desktop view. Is this the proper way of making media query?

craftdeer
  • 985
  • 5
  • 20
  • 36
  • 1
    Yes this is a good method. It is called mobile first design. There is no need for the 320px query though. Style it for phones, then override some of those styles for tablets, then override some of those for desktop. Try not to override too much and you'll have something that works great on phones and stays pretty consistent across larger screens. – JasonB Mar 24 '18 at 04:43
  • 1
    Should be fine, but yes, if you set some css that works well on mobile, you might have to undo it for other sizes. The idea is to do it as little as possible, but you might have to add and remove the same css per size. – wazz Mar 24 '18 at 04:45

1 Answers1

1

This @media only screen and (min-width: 320px) will target all screen with min-width:320px. One way you can alter the MQ is by having this 

@media only screen and (max-width: 767px) {
  **mobile/iphone style**
}

In the above MQ style will be taken on those devices below tablet screen size .

Fore more you can find here Media Queries: How to target desktop, tablet and mobile?

Athul Nath
  • 2,536
  • 1
  • 15
  • 27