Skip to content

Instantly share code, notes, and snippets.

@oooh-boi
Created January 7, 2020 18:51
Show Gist options
  • Save oooh-boi/5d1f00ee8362292dba0af27700b05d74 to your computer and use it in GitHub Desktop.
Save oooh-boi/5d1f00ee8362292dba0af27700b05d74 to your computer and use it in GitHub Desktop.
OoohBoi Video Tutorial : Super-flexible Sections and Columns in Elementor PRO
/* MAGICAL CSS Rule */
selector .elementor-container .elementor-row {
flex-wrap: wrap;
/* uncomment for columns alignment */
/* justify-content: center; */
}
/* Responsive Columns Alignment - Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
selector .elementor-container .elementor-row {
justify-content: end;
}
}
/* Media Query - Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
selector {
width: 100%; /* or whatever you like */
}
}
/* Media Query - Mobile */
@media (max-width: 767px) {
selector {
width: 100%; /* or whatever you like */
}
}
/* Merged Media Query - Tablet and Mobile */
/*
@media (min-width: 1px) and (max-width: 1024px) {
selector {
width: 100%;
}
}
*/
@oooh-boi
Copy link
Author

With Elementor's "Optimized DOM Output" enabled, it's only:

selector .elementor-container {
    flex-wrap: wrap;
    /* uncomment for columns alignment */
    /* justify-content: center; */
}

It's a good idea to provide the custom class name for the target section tho...

selector.some-custom-class-name .elementor-container {
    flex-wrap: wrap;
    /* uncomment for columns alignment */
    /* justify-content: center; */
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment