Question 2120 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WP Elementro – Header & Footer not full width only on pages – WordPress

I am working on a new WordPress page by using Elementor for templating.
Unfortunately, I run into an issue where the custom Header & custom Footer will not be using the full width.
This issue appears only on pages not for posts, 404-sites, etc. which were built with the Theme-Builder.
Pages where header & footer is incorrect:
enter image description here

Post/404-site or all other templates which are were with Theme buider
enter image description here

I tried the following to solve the issue:

  • starting from scratch (reset of all elementor changes)
  • changing the general Layout settings: Theme, Elementor-Full Width
  • changing the site Layout settings: Theme, Elementor-Full Width, Default Theme
  • configuring “stretch section” within a site (this solves the issue but is more a workaround because it is using JS which means Header & Footer will be stretched after the paged is loaded which means for some seconds you see that the header & footer is not using full width
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    thanks for the answer. Sorry i forgot to add that I am using the "Hello Elementor" Theme. Unfortunately, there is no setting for full-width. Which brings me to the point that something seems to be wrong.

    i did some analysis and it seems that some css-styles are added directly within the HTML code which is generated on page load.


  2. 0

    You need to examine the theme being used. What theme is it? Themes that are most compatible with Elementor will try to avoid overriding it’s styles. Other themes will often output a page container with a boxed width, which appears to be what is happening there. Check if your theme offers any settings for full width or different templates, look for one that is a canvas or blank. If you want developers to be able to debug this for you, edit your question to include the name of the theme, and inspect your source code and screenshot it or paste the source code from one of the pages in question. What a developer would do to debug this is using a browser with inspector, look at the parent tags that contain the page, then see which CSS styles are adding max-width or margin. One you identify where the problem is coming from them you can either switch themes or add some custom CSS to fix it. Of course it could be possible to fix it with configuration, maybe your theme has a "canvas" type template that doesn’t wrap the content, or maybe it has a full width option that needs to be set. The process of debugging starts with examining the theme, then inspecting the output code.

    Login or Signup to reply.
  3. 0

    I was able to find the issue. The issue was caused by an additional plugin which did some JS/CSS stuff.

    Thanks for support.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search