CSS Media Queries for Desktop, Tablet, Mobile.

media-query.css

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
  /* CSS */
  
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
  /* CSS */
  
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  
  /* CSS */
  
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  /* CSS */
  
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  
  /* CSS */
  
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  
  /* CSS */
  
}

Thanks bro

Excellent!

Thank you so much

@FrancisCG97 @ZMVelasco Mireeeeen

thank you

Thanks for these useful content @gokulkrishh

there are mobile devices which has width less than 320px, like the Samsung galaxy fold
For the same we can use the below media query

@media (max-width: 319px) {
   /*CSS*/
}

How do i put this in website

How do i put this in website

Learn about CSS and media queries. YouTube is full of tutorials. There's many way to add this into your website and without knowing what you have we can't tell you to do it this or that way.

Thanks bro

Thank you

Thank You

Thanks All

Thanks a lot

Nice and Descriptive! Thanks a lot!

Thank you! But what about the iPhone 15 Pro Max? It has a 1290px width, doesn't it?

really helpful

Thank you!

hohoho there you are

Thank you 👍 )👍🙌(●'◡'●)

Thanks bro helpful content

Thanks for sharing this !