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:

Post/404-site or all other templates which are were with Theme buider

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

CodePudding user response：

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.

CodePudding user response：

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.