CONTAINER BOXED CLASS

Gestiona globalmente el ancho de tu contenedor con fondo en layout “boxed”

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.

Te recomiendo usar los siguientes valores:

  • Pantalla ancha (Widescreen): puedes dejarlo vacío.
  • Escritorio (Desktop): 1120px
  • Portátil (Laptop): 85%
  • Tableta horizontal (Tablet Landscape): déjalo vacío (usará el 85%).
  • Tableta vertical (Tablet Portrait): déjalo vacío (usará el 85%).
  • Móvil horizontal (Mobile Landscape): déjalo vacío (usará el 85%).
  • Móvil vertical (Mobile Portrait): 90% o 95% (dependiendo de tu diseño).

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%;}}