Troubleshooting Layout Issues

Are you having layout issues? These are the most common issues, causes, and solutions available.

General Layout Issues

Cache Issues

Quite often, cache is causing the layout issue you see.

You can first try to simply clear your browser's cache, use a different browser, or view in an incognito browser. If this doesn't help, then follow these steps:

  1. Go to Elementor > Tools > Regenerate CSS and click the Regenerate Files button. 
  2. Update your page. You may need to make a small change to enable the Update button. 
  3. Clear all cache including server cache if it exists, any WordPress caching plugins you are using, and your own browser cache. You can also try checking in another browser, or in an incognito browser.

Plugin Conflicts

To find a plugin that is causing the layout issue, deactivate all of your plugins except Elementor and Elementor Pro, if applicable. If this solves the problem, reactivate each plugin one by one, until you spot the problematic plugin. If found, contact that plugin's support for help, or use a different plugin.

Theme Issues

Switch your theme (temporarily) to a default WP theme such as Twenty Nineteen to see if your theme is causing an issue. If so, contact the theme’s developers for help, or use a different theme.

Version Problems

 Layout issues can also be due to the use of an older version of Elementor. Sometimes it isn't obvious that there is a plugin update available. Go to Dashboard > Updates and click the Check Again button to be sure.


Specific Layout Issues

Padding At The Top Or Bottom Of The Website 

This is generally due to padding added by your theme and there is usually an option to remove it via the customizer. Go to Appearance > Customize and look for an option that controls this. You may need to check with your theme’s support or documentation. 

Horizontal Scroll Bar On Mobile Devices

This is due to an element which creates overflow. You can quickly find which element is causing the problem by following the instructions here:

Easily debug horizontal scrolling on mobile

Once you’ve determined which section has overflowed, you can edit that Section’s Layout tab, and change Overflow to Hidden.

If you prefer, you can opt for a less technical way to find the section that has overflowed. Simply save the page as a template, then edit the template. Delete each section, one by one, and test on mobile after each deletion. When the problem disappears, you’ve found the problematic section.

Changes You See In The Editor Do Not Show On The Live Site

If the changes you’ve made look right in the editor, but they aren’t being reflected on the live site, this is often due to a caching issue. When your styles are not applied online, please follow the same steps listed above for dealing with cache issues:

  1. Go to Elementor > Tools > Regenerate CSS and click the Regenerate Files button. 
  2. Update your page. You may need to make a small change to enable the Update button. 
  3. Clear all cache including server cache if it exists, any WordPress caching plugins you are using, and your own browser cache. You can also try checking in another browser, or in an incognito browser.

If this does not solve the problem, please see more possible solutions here:

My changes do not appear online. What can I do?

Elements Disappeared

If some elements of your page have suddenly disappeared, this is often due to a conflict with a plugin or with some script added via your theme. Please follow the Plugin Conflicts and Theme Issues instructions at the top of this article to find the plugin or theme issue. 

Other possible solutions are also listed here:

Some elements disappeared on my live site. How can I solve this?

My Widget Is Being Covered Up By Something Else

If one element is on top of, or under, another element, and the positions should be reversed, you need to change the Z-index of one of the elements. For example, if your menu is being hidden by an image that is displayed on top of the menu dropdown, you have a Z-index problem.

The Z-Index property specifies the stack order of elements. An element with greater stack order will always be in front of an element with a lower stack order. To solve this you simply need to adjust the Z-index value of one of the element’s, which can be found in the element’s Advanced tab. Make the Z-index lower or higher to move the layer below or above the other element, as needed.

How to use Z-Index in Elementor

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.