Advanced Elementor custom breakpoints using Custom CSS - Do more with Elementor!
In this video, I'll show you how to add Advanced Elementor custom breakpoints using CSS. You can use CSS breakpoints to design better responsive websites with Elementor.
Before you watch this video watch the basic custom breakpoint tutorial:
• Elementor custom breakpoints: Solving...
Get Elementor Pro:
https://bit.ly/designelementorpro
*Some Important Links*
If you're new to Elementor, learn the basics here:
• Elementor basics tutorial for beginne...
Join the Facebook Group: / designschoolwp
*Css Code used shown in the video*
*Code #1 for applying code withing ranges*
.anyelesection {
background-color: tan;
color: black;
}
/*default code ends*/
/* On screens that are 900px wide or less, the background color is blue */
@media screen and (min-width: 400px) and (max-width: 500px) {
.anyelesection {
background-color: blue;
color: white;
}
}
/* On screens that are 600px wide or less, the background color is olive */
@media screen and (min-width: 600px) and (max-width: 800px) {
.anyelesection {
background-color: olive;
color: white;
}
}
*Code #2 for applying landscape/orientation logic*
/*default code*/
.anyelesection {
background-color: tan;
color: black;
}
/*default code ends*/
/* On screens that are 900px wide or less, the background color is blue */
@media screen and (orientation:landscape) {
.anyelesection {
background-color: olive;
color: white;
}
}
@media screen and (orientation:portrait) {
.anyelesection {
background-color: blue;
color: white;
}
}