This thread is resolved. Here is a description of the problem and solution.
Problem: When I try to display a grid View in Elementor using a shortcode, the grid is shown in a single column instead of 3 columns. If I display the same View without Elementor, 3 columns are displayed as expected.
Solution: Copy the missing CSS and paste it into the View's Custom CSS panel:
.elementor-shortcode .js-wpv-view-layout-1406 > .js-wpv-loop-wrapper > .tb-grid {
grid-template-columns: minmax(0, 0.3333fr) minmax(0, 0.3333fr) minmax(0, 0.3333fr);
grid-auto-flow: row;
}
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | - | - |
| 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | - | - |
Supporter timezone: America/New_York (GMT-04:00)
This topic contains 3 replies, has 2 voices.
Last updated by 3 years, 8 months ago.
Assisted by: Christian Cox.
Hello, I am attaching screenshots showing what I see when I visit these two pages in desktop and mobile browsers. At first glance, it looks like the Test page is set up to display on a full-width template and the header is hidden, but the Module Search 2 page is set to display in a contained or boxed template with a header shown as usual.
I would need to see how these pages are set up in wp-admin to be able to make a good recommendation. May I log in to your wp-admin area and take a closer look? Please provide login credentials in the private reply fields here and I will give you some more feedback.
Okay I can see that some styles for the grid are not applied when the View is displayed with a shortcode in Elementor. I have added the following CSS to your View's CSS panel to apply the missing grid styles:
.elementor-shortcode .js-wpv-view-layout-1406 > .js-wpv-loop-wrapper > .tb-grid {
grid-template-columns: minmax(0, 0.3333fr) minmax(0, 0.3333fr) minmax(0, 0.3333fr);
grid-auto-flow: row;
}
You can see this View and the corresponding CSS in the Custom JS & CSS panel here: hidden link (screenshot attached). Let me know if you have questions about this.
