CSS Media Queries

Screen Size Maximums

Laptops or Smaller

Everything smaller than a desktop screen

@media (max-width: 1280px) {


Tablets or Smaller

Everything smaller than a Laptop Screen

@media (max-width: 1024px) {


Small Tablets or Smaller

Everything smaller than a standard tablet screen

@media (max-width: 767px) {


Smartphones or Smaller

Standard Smart Phones or smaller

@media (max-width: 480px) {


Screen Size Minimums

Desktops or Larger

Standard Size Desktops or Larger

@media (min-width: 1281px) {


Tablets or Larger

Standard Size Tablets and Smaller

@media (min-width: 1025px) {


Small Tablets or Larger

Small tablets (Portrait), Smartphones (Landscape) and smaller

@media (min-width: 768px) {


Anything Larger than Smartphones

Anything larger than a standard smart phone

@media (min-width: 481px) {


Screen Size Ranges

Desktops & Larger

1281px to higher resolution screens

@media (min-width: 1281px) {



Laptops & Small Desktops

@media (min-width: 1025px) and (max-width: 1280px) {


Tablets - (Portrait)

Tablets & Ipads, Portrait Orientation

@media (min-width: 768px) and (max-width: 1024px) {


Tablets - (Landscape)

Tablets & Ipads, Landscape Orientation

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


Small Tablets

Small tablets (Portrait) & Phones (Landscape)

@media (min-width: 481px) and (max-width: 767px) {



Typical smart phones (Portrait)

@media (min-width: 320px) and (max-width: 480px) {


Share This:


101 South Main Street
Suite 101
Memphis, TN 38103

Copyright 2024 New Urban Media

Accredited Agency

A+ Rating since 06/01/2018

5 Star Rating

15+ Google Reviews | ⭐️⭐️⭐️⭐️⭐️