Created
January 7, 2020 18:51
-
-
Save oooh-boi/5d1f00ee8362292dba0af27700b05d74 to your computer and use it in GitHub Desktop.
OoohBoi Video Tutorial : Super-flexible Sections and Columns in Elementor PRO
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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%; | |
} | |
} | |
*/ |
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
selector .elementor-container .elementor-row {
flex-wrap: wrap;
/* uncomment for columns alignment /
/ justify-content: center; */
}
Flex wrap doesn't seem to be working on the latest release of elementor.