COURSES https://slayingthedragon.io
Join the discord   / discord  

You might be wondering why there’s a Chameleon in the thumbnail of this video.

A Chameleon can change it’s color and pattern adapting it’s appearance to match it’s environment.

The chameleon's ability to quickly and seamlessly change its appearance is a skill to be admired and what I’m suggesting is that we ought to be more like the chameleon when creating our responsive layouts.

The mobilefirst predefined media queries:
/* xs */
/* @media (minwidth: 475px) {} */

/* sm */
/* @media (minwidth: 640px) {} */

/* md */
/* @media (minwidth: 768px) {} */

/* lg */
/* @media (minwidth: 1024px) {} */

/* xl */
/* @media (minwidth: 1280px) {} */

/* 2xl */
/* @media (minwidth: 1536px) {} */

The desktopfirst predefined media queries:
/* 2xl */
@media (maxwidth: 1536px) {}

/* xl */
@media (maxwidth: 1280px) {}

/* lg */
@media (maxwidth: 1024px) {}

/* md */
@media (maxwidth: 768px) {}

/* sm */
@media (maxwidth: 640px) {}

/* xs */
@media (maxwidth: 475px) {}

Mobile container utility class:
.container {
width: 100%;
marginleft: auto;
marginright: auto;
paddingleft: 0.5rem;
paddingright: 0.5rem;
}

/* xs */
@media (minwidth: 475px) {
.container {
maxwidth: 475px;
}
}

/* sm */
@media (minwidth: 640px) {
.container {
maxwidth: 640px;
}
}

/* md */
@media (minwidth: 768px) {
.container {
maxwidth: 768px;
}
}

/* lg */
@media (minwidth: 1024px) {
.container {
maxwidth: 1024px;
}
}

/* xl */
@media (minwidth: 1280px) {
.container {
maxwidth: 1280px;
}
}

/* 2xl */
@media (minwidth: 1536px) {
.container {
maxwidth: 1536px;
}
}

Desktop container utility class:
.container {
maxwidth: 1536px;
marginleft: auto;
marginright: auto;
paddingleft: 0.5rem;
paddingright: 0.5rem;
}

/* 2xl */
@media (maxwidth: 1536px) {
.container {
maxwidth: 1280px;
}
}

/* xl */
@media (maxwidth: 1280px) {
.container {
maxwidth: 1024px;
}
}

/* lg */
@media (maxwidth: 1024px) {
.container {
maxwidth: 768px;
}
}

/* md */
@media (maxwidth: 768px) {
.container {
maxwidth: 640px;
}
}

/* sm */
@media (maxwidth: 640px) {
.container {
maxwidth: 475px;
}
}

/* xs */
@media (maxwidth: 475px) {
.container {
width: 100%;
}
}