Last active
August 6, 2021 16:24
-
-
Save askwpgirl/4f83c25cd4f08607eeb2653d1aa21336 to your computer and use it in GitHub Desktop.
Elementor Pro 3.3.1 grid styles
This file contains hidden or 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
| /* Add to Appearance > Customize > Custom CSS or your child theme's style.css file to bring back the Elementor WooCommerce product grid layouts | |
| These were removed in Elementor Pro 3.3.3. Is fixed in Elementor Pro 3.3.4. */ | |
| @media (min-width: 1025px) { | |
| .elementor-element.elementor-products-grid ul.products.columns-2 { | |
| grid-template-columns: repeat(2, 1fr); } | |
| .elementor-element.elementor-products-grid .woocommerce.columns-2 ul.products { | |
| grid-template-columns: repeat(2, 1fr); } | |
| .elementor-element.elementor-products-grid ul.products.columns-3 { | |
| grid-template-columns: repeat(3, 1fr); } | |
| .elementor-element.elementor-products-grid .woocommerce.columns-3 ul.products { | |
| grid-template-columns: repeat(3, 1fr); } | |
| .elementor-element.elementor-products-grid ul.products.columns-4 { | |
| grid-template-columns: repeat(4, 1fr); } | |
| .elementor-element.elementor-products-grid .woocommerce.columns-4 ul.products { | |
| grid-template-columns: repeat(4, 1fr); } | |
| .elementor-element.elementor-products-grid ul.products.columns-5 { | |
| grid-template-columns: repeat(5, 1fr); } | |
| .elementor-element.elementor-products-grid .woocommerce.columns-5 ul.products { | |
| grid-template-columns: repeat(5, 1fr); } | |
| .elementor-element.elementor-products-grid ul.products.columns-6 { | |
| grid-template-columns: repeat(6, 1fr); } | |
| .elementor-element.elementor-products-grid .woocommerce.columns-6 ul.products { | |
| grid-template-columns: repeat(6, 1fr); } | |
| .elementor-element.elementor-products-grid ul.products.columns-7 { | |
| grid-template-columns: repeat(7, 1fr); } | |
| .elementor-element.elementor-products-grid .woocommerce.columns-7 ul.products { | |
| grid-template-columns: repeat(7, 1fr); } | |
| .elementor-element.elementor-products-grid ul.products.columns-8 { | |
| grid-template-columns: repeat(8, 1fr); } | |
| .elementor-element.elementor-products-grid .woocommerce.columns-8 ul.products { | |
| grid-template-columns: repeat(8, 1fr); } | |
| .elementor-element.elementor-products-grid ul.products.columns-9 { | |
| grid-template-columns: repeat(9, 1fr); } | |
| .elementor-element.elementor-products-grid .woocommerce.columns-9 ul.products { | |
| grid-template-columns: repeat(9, 1fr); } | |
| .elementor-element.elementor-products-grid ul.products.columns-10 { | |
| grid-template-columns: repeat(10, 1fr); } | |
| .elementor-element.elementor-products-grid .woocommerce.columns-10 ul.products { | |
| grid-template-columns: repeat(10, 1fr); } | |
| .elementor-element.elementor-products-grid ul.products.columns-11 { | |
| grid-template-columns: repeat(11, 1fr); } | |
| .elementor-element.elementor-products-grid .woocommerce.columns-11 ul.products { | |
| grid-template-columns: repeat(11, 1fr); } | |
| .elementor-element.elementor-products-grid ul.products.columns-12 { | |
| grid-template-columns: repeat(12, 1fr); } | |
| .elementor-element.elementor-products-grid .woocommerce.columns-12 ul.products { | |
| grid-template-columns: repeat(12, 1fr); } } | |
| @media (max-width: 1024px) { | |
| .elementor-element.elementor-products-grid ul.products { | |
| grid-template-columns: repeat(3, 1fr); } } | |
| @media (max-width: 767px) { | |
| .elementor-element.elementor-products-grid ul.products { | |
| grid-template-columns: repeat(2, 1fr); } } | |
| @media (min-width: 1025px) { | |
| .elementor-element.elementor-products-grid.elementor-products-columns-1 ul.products { | |
| grid-template-columns: repeat(1, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-2 ul.products { | |
| grid-template-columns: repeat(2, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-3 ul.products { | |
| grid-template-columns: repeat(3, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-4 ul.products { | |
| grid-template-columns: repeat(4, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-5 ul.products { | |
| grid-template-columns: repeat(5, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-6 ul.products { | |
| grid-template-columns: repeat(6, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-7 ul.products { | |
| grid-template-columns: repeat(7, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-8 ul.products { | |
| grid-template-columns: repeat(8, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-9 ul.products { | |
| grid-template-columns: repeat(9, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-10 ul.products { | |
| grid-template-columns: repeat(10, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-11 ul.products { | |
| grid-template-columns: repeat(11, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-12 ul.products { | |
| grid-template-columns: repeat(12, 1fr); } } | |
| @media (max-width: 1024px) { | |
| .elementor-element.elementor-products-grid.elementor-products-columns-tablet-1 ul.products { | |
| grid-template-columns: repeat(1, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-tablet-2 ul.products { | |
| grid-template-columns: repeat(2, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-tablet-3 ul.products { | |
| grid-template-columns: repeat(3, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-tablet-4 ul.products { | |
| grid-template-columns: repeat(4, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-tablet-5 ul.products { | |
| grid-template-columns: repeat(5, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-tablet-6 ul.products { | |
| grid-template-columns: repeat(6, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-tablet-7 ul.products { | |
| grid-template-columns: repeat(7, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-tablet-8 ul.products { | |
| grid-template-columns: repeat(8, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-tablet-9 ul.products { | |
| grid-template-columns: repeat(9, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-tablet-10 ul.products { | |
| grid-template-columns: repeat(10, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-tablet-11 ul.products { | |
| grid-template-columns: repeat(11, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-tablet-12 ul.products { | |
| grid-template-columns: repeat(12, 1fr); } } | |
| @media (max-width: 767px) { | |
| .elementor-element.elementor-products-grid.elementor-products-columns-mobile-1 ul.products { | |
| grid-template-columns: repeat(1, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-mobile-2 ul.products { | |
| grid-template-columns: repeat(2, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-mobile-3 ul.products { | |
| grid-template-columns: repeat(3, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-mobile-4 ul.products { | |
| grid-template-columns: repeat(4, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-mobile-5 ul.products { | |
| grid-template-columns: repeat(5, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-mobile-6 ul.products { | |
| grid-template-columns: repeat(6, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-mobile-7 ul.products { | |
| grid-template-columns: repeat(7, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-mobile-8 ul.products { | |
| grid-template-columns: repeat(8, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-mobile-9 ul.products { | |
| grid-template-columns: repeat(9, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-mobile-10 ul.products { | |
| grid-template-columns: repeat(10, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-mobile-11 ul.products { | |
| grid-template-columns: repeat(11, 1fr); } | |
| .elementor-element.elementor-products-grid.elementor-products-columns-mobile-12 ul.products { | |
| grid-template-columns: repeat(12, 1fr); } } |
This was fixed in Elementor Pro 3.3.4 and then removed again in 3.3.5. You can use the above styles in your CSS until it's fixed.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This issue is fixed in Elementor Pro 3.3.4. If you do use this CSS in your theme or custom CSS area, you can remove it after updating to Elementor Pro 3.3.4.