Question about #wrap-all

>> Yes, all the content should be in the container with the id of wrap-all.

OK thanks for that info. In that case I have a weird issue, and I’m not sure how to resolve it. On my live site, and staging site, on my home page, all my content is indeed inside #wrap-all. But when I cloned my live site to my local site, my local site was different in that respect. On my local site, only the top couple elements are inside #wrap-all. The rest of the elements are outside #wrap-all, at the same level in the DOM (screenshots). Any ideas how that would even occur, much less how to fix it? I guess some custom JavaScript could accomplish that, but I am using the unmodified parent theme, so there should be none of that.

This issue is causing problems with styling. Certain CSS rules that should be applied are not, because of the incorrect DOM structure.

>> Did you add any html tags in the page? You have to make sure that all tags are closed properly, otherwise they will break the layout of the site.

OK good point. I personally haven’t added any custom HTML to the page, but I also did not build the page. Is there an automated tool I can use to check a page for unclosed/incorrect HTML tags?

>> You can also set the builder to debug mode and enable the shortcode parser to automatically repair the shortcodes on update.

Let’s say I had added custom HTML to the page, and accidentally included an unclosed HTML tag. Would the shortcode parser be able to find/fix that?

I have an update. I used that site (https://www.aliciaramirez.com/closing-tags-checker/) to check for unclosed tags. I ran it twice:

1. I first enabled debug mode. Then I opened my page for editing, and located the debug field. I copied the text in that field and pasted it into the tag checker. It reported no unclosed tags. But as you know, the debug field does not contain all the HTML on the page–there are many shortcodes. Here is the full text of the debug field.

2. In the second test, I opened the front-end of my page, and viewed the source code. I copied it and pasted it into the tag checker. It reported several unclosed tags:

Line 743: <li class="news-content post-format-standard">
Line 743: <a class='news-link' title='Is Forage All a Horse Needs?' href='https://feedxldev.local/is-forage-all-a-horse-needs/'>
Line 743: <span class='news-thumb '>
Line 743: <a class='news-link' title='Don’t Forget the Milk!' href='https://feedxldev.local/dont-forget-the-milk/'>
Line 743: <a class='news-link' title='How to Make Sense of Pasture Analysis Results' href='https://feedxldev.local/how-to-make-sense-of-pasture-analysis-results/'>
Line 959: <form action="https://feedxldev.local/" method="get" id="adminbarsearch">
Line 959: <a class='ab-item' aria-haspopup="true" href='https://feedxldev.local/wp-admin/profile.php'>

Again, there is no custom HTML added to the page.

In light of the second test, how do you think I should proceed? Do you think I run the shortcode parser?

>> Can we access the site with the broken layout? We would like to inspect the content of the page. Please provide the login details in the private field.

Actually no, that’s one of the issues here. I have three sites: a live site, an online staging site, and a local dev site. This issue exists *only* on the local dev site–the only site you cannot access :-(

>> Yes, you should run the parser and see it fixes the issue.

OK. But can you give me clear instructions on what exactly I should do? The page you linked isn’t clear. It just says,

>> Below ALB debug window you have a section Enfold Shortcode parser with a select box
>> You have to update the page to check the content

It also refers to the feature as “Enfold shortcode Preser .” I see a select box in the “Enfold Shortcode Parser” section. In it is an option for “Auto Repair Function enabled – Repairs errors in shortcode structure during update” (screenshot). Should I select this? If so, what should I do after? Please be clear about any and all steps I should take–I have never used this tool, nor do I know what to expect.

Thanks.

OK I ran the shortcode parser repair. After updating the page, it indicated

>> 0 warning(s), 5 error(s), 0 fatal error(s) were detected parsing the shortcodes. Necessary changes were applied to fix all found problems

But when I checked my HTML, the issue was still present. What can I do now to troubleshoot?

When I used that tool to check for unclosed tags, and entered the full HTML source code of the page, it found several unclosed tags:

Line 743: <li class="news-content post-format-standard">
Line 743: <a class='news-link' title='Is Forage All a Horse Needs?' href='https://feedxldev.local/is-forage-all-a-horse-needs/'>
Line 743: <span class='news-thumb '>
Line 743: <a class='news-link' title='Don’t Forget the Milk!' href='https://feedxldev.local/dont-forget-the-milk/'>
Line 743: <a class='news-link' title='How to Make Sense of Pasture Analysis Results' href='https://feedxldev.local/how-to-make-sense-of-pasture-analysis-results/'>
Line 959: <form action="https://feedxldev.local/" method="get" id="adminbarsearch">
Line 959: <a class='ab-item' aria-haspopup="true" href='https://feedxldev.local/wp-admin/profile.php'>

Do you think I should try to fix each of these? If so, how–how can I properly edit the HTML source code of this page? Do I have to first switch to ‘Default Editor’ and edit the source code via the text editor? Or can I edit the HTML source code from within the Avia page builder?

>> Looks like the tags are within the news widget. Did you add that widget in the page?

No I did not.

>> Please try to clone the local site on a live domain so that we can actually check the issue.

Unfortunately I cannot do this. The site does existing on my online server. But this issue is not present there–the issue is present only on my local site for some reason.

>> The builder uses shortcodes, so you can’t edit the markup there directly, unless you added the html tags manually using a text or code block element.

OK too bad. So are the shortcodes generating incorrectly structured HTML? If so, how and why?

>> Did you add any custom shortcodes in the page using a text or code block?

I don’t see any code blocks on the page. And I looked through all the text blocks and don’t see any shortcodes added.

>> If so, adding the following filter in the functions.php file might help.

Can you describe what exactly that code will do? I see in the header it indicates:

>> * Allow to force execution of shortcodes e.g. for plugins who call shortcode via an ajax call.
>> * Enfold uses this to execute the shortcode for modal popup preview in backend

I’m not sure what that means. Does this mean that after I add this code to my site, a modal window will display when I load the ‘edit page’ screen for my home page?

OK. So after adding the custom code to functions.php, what exactly should I do? Can you list the steps I should execut, what output I should expect to see (and where), and what kind of analysis I should carry out?

So are you saying I should add this custom PHP code, then open my home page–the front-end–and see if the issue has been resolved? If not, please spell out the specific steps I should take after adding the PHP code.

OK thanks for confirming. I added that code, then updated the page, but the issue was still there.

I then did some more checking. I told you earlier that my local site is identical to both my dev site, and my live site. But I looked closer, and found out that is not 100% identical. There is one element on the page–a Full Width Slider Revolution element. On the dev site and live site this is an Avia ‘Full Width Slider Rev’ element (screenshot). But on my local site (the site experiencing the issue in-question), this was not an Avia ‘Full Width Slider Rev’ element. It was instead an Avia Text Box element, and inside was a Slider Rev shortcode: [av_revolutionslider id=’2′ av_uid=’av-3crm4p’]. When I deleted that text box element and replaced it with the Avia ‘Full Width Slider Rev’ element, the issue went away. So for some reason, that shortcode was causing issues.

We can consider this resolved.