Do you have problems with the responsive mode in Elementor where the columns and widgets are not displayed properly aligned for tablet and/or mobile devices?
In this tutorial I explain to you why Elementor Responsive is not working. I also explain how you can make sure that the widgets and columns are displayed properly in the elementor editor.
You might have experienced the situation that in the Elementor editor responsive mode on some device sizes the design is not being displayed correctly, even when you adjust things in the editor.
I will explain what the solution is and how you can make sure that everything is being displayed correctly in the Elementor editor.
So make sure to check out this tutorial because it really can save you a lot of time and frustrations.
Watch tutorial on YouTube
Elementor responsive not working, elements aligned to left example
I have opened the Elementor editor and if you have worked with it before you might have experienced that if you go to the responsive mode for the tablet view or the mobile view, the screen design suddenly appears incorrectly. For example, all widgets can be aligned to the left when that should not be the case.
On the image below you can see that the header is not being displayed correctly anymore everything is aligned to the left.
That is not supposed to be the case because over here in the desktop view you can see that everything is supposed to be aligned like this.
That’s also the case for the mobile view as you can see on the image below.
So only for the tablet everything is aligned to the left.
Of course, you want to create a website that is displayed correctly on all different devices and different screen sizes.
When I didn’t know what the cause of the problem was it cost me a lot of time and frustrations and with this tutorial, I hope to save you this.
Elementor responsive issue cause
Let me explain what’s going on, you might have noticed that if you open a different browser tab as I have also done over here and visit your website as a regular visitor then if you do a responsive check everything is looking fine.
So then the problem won’t occur so the conclusion of that is that the problem only occurs inside of the Elementor editor.
Of course, it’s somewhat of a relief that for regular visitors of your website everything is looking fine but when it comes down to designing it’s really annoying if you want to make adjustments in the response mode when elements are displayed incorrectly in the editor.
A logical explanation would be that the issue is caused by the element or editor because that is where the issue is visible, but that’s not the case.
Elementor responsive not working solution
The issue is caused by the display settings in your browser.
For example if you zoom in or your zoom out while working in the Elementor editor you can see that this is what is causing the issue.
Now you can see that this zoom icon is set to 90%
if I adjust the screen size to 100% now you can see that everything is looking fine again and the problem no longer occurs.
So always make sure the zoom of your browser is set to 100% when you are working with the Elementor editor! That’s it.
You can watch the tutorial on YouTube over here in which I explain everything in more detail.
Check out this tutorial to learn the Elementor basics in 7 minutes.
I hope this tutorial is helpful. It that’s the case make sure to subscribe to the channel and drop a like and comment. Thanks, and I hope to see you back in the next tutorial!