“It seems like all our pages that are build with Elementor have container width issues now on the FRONT end of the site, but they display just fine when in the editor. (See image. The 6 purple boxes should be on two rows, three boxes in each). Any thoughts on how to fix this or what the actual problem is?”
What Does Not Fix the Problem
Of course the Internet is full of “helpful tips”, that mostly don’t work.
- No, you don’t need to disable some plugins (do that when you have some evidence it might be the problem).
Troubleshooting
Here is my answer in that online group:
We don’t yet have any specific information, so probably you don’t yet either. Can’t troubleshoot without information.
If you haven’t used your browser’s Inspector, look up how to use it to troubleshoot CSS issues.
Check the more likely issues, such as “3 boxes won’t fit across in this container width, with this box width and this gap width”; or “at this content width, you configured the grid to display 2-across”.
What does the browser’s Inspector say about the width of each “purple box”, the space between the boxes horizontally, and the width of the container all the purple boxes are in?
Is the width of the box-container when you are seeing it in the editor, different than when you are seeing it “actual page online”? The editor has that side panel, so it has to fudge things to display the page “screen width as best it can”.
What are the widths of the “containing containers”, especially the content area size?
What are the settings of the grid, for desktop vs tablet vs mobile?
When you have explored the CSS enough to identify where exactly the gap width and box width are set, how does altering (in the browser, not permanently on the site) the gap width or containing-container’s width affect the display?
p.s. Things like “try disabling plugins” is not a thing to check yet. You have no indication this is about a plugin conflict.
Check the settings of the grid and the surrounding container.
Then check if Elementor adjusted the default Gap size by a pixel or two, or similar change, in the recent version, if you want.
Clearing the Elementor cache and your browser cache are always good ideas, so you don’t get a cached version of the page you are editing. Elementor should already be configured to not cache anyone logged in as Administrator or Editor.
