UPDATE: You don’t need to use CSS anymore, because the newest update of Elementor now allows you to set up the width for each breakpoint
Just set up your different breakpoints according to the following values in Site Settings > Layout > Content Width.
- Widescreen: you can leave empty
- Desktop: 1120px
- Laptop: 75%
- Tablet landscape: you can also leave empty
- Tablet: 80%
- Mobile landscape: you can also leave empty
- Mobile: 85%
The code on this page below will be deleted soon because it’s irrelevant.
ORIGINAL POST:
In order to use this method you have to put the c-box text to every container. But then it allows you to change all of them from one place and you keep the freedom to do a few container manually, because if you don’t put in the c-box value then it simply doesn’t apply. And ofcourse the big benefit that you can add multiple breakpoints. So you can even add more than what I have over here.
/* Ultra wide */
@media (max-width: 3840px) {.c-box {--content-width: 1120px;}}
/* Desktop */
@media (max-width: 1920px) {.c-box {--content-width: 1120px;}}
/* Laptop big */
@media (max-width: 1600px) {.c-box {--content-width: 74%;}}
/* Laptop small */
@media (max-width: 1366px) {.c-box {--content-width: 77%;}}
/* Tablet portrait */
@media (max-width: 1200px) {.c-box {--content-width: 80%;}}
/* Mobile */
@media (max-width: 767px) {.c-box {--content-width: 85%;}}
If you want to use % on desktop as well, then use the following code
/* Ultra wide */
@media (max-width: 3840px) {.c-box {--content-width: 55%;}}
/* Desktop */
@media (max-width: 1920px) {.c-box {--content-width: 65%;}}
/* Laptop big */
@media (max-width: 1600px) {.c-box {--content-width: 74%;}}
/* Laptop small */
@media (max-width: 1366px) {.c-box {--content-width: 77%;}}
/* Tablet portrait */
@media (max-width: 1200px) {.c-box {--content-width: 80%;}}
/* Mobile */
@media (max-width: 767px) {.c-box {--content-width: 85%;}}
