Footer jumped outside of boundaries after plugin updates

Hello,

I wonder if you would be able to help me with an error that has occurred on a website I manage. I updated some plugins then looked at the site and saw the the footer had jumped out of its bounds. It should look like this http://www.tpiver5.definemedia.co.uk/ but actually looks like this http://thepartneringinitiative.org/.

I am in a bit of a panic over this as i can't see where it has happened. They weren't major updates - I do have a backup but am reluctant to restore everything for this. Also, the spacing is different above Featured Projects and below the logo slider, but suspect this is the same cause.

The last plugins updated were Genesis Recent Posts widget extended, Genesis Slider and Genesis latest tweets.

Please can you help me get the layout back to previous, very much appreciated. Maria

  • Predrag Dubajic

    Hey @Maria,

    Hope you're doing well today :slight_smile:

    Plugins you listed shouldn't affect footer layout like this but I can't say they are not the cause for sure.

    When I inspect your page I see that there is difference in HTML structure on those two sites.
    One which has large footer, has .footer-widgets div directly in body tag and the other one has .footer-widgets inside body > .site-container div and that div defines site width and holds footer in place.

    You should check if there were any changes to the theme you are using which could be causing this or you can try alternative solution by adding this CSS code:

    .footer-widgets,
    .site-footer {
    	margin: 0 auto;
        max-width: 1140px;
    }
    
    @media only screen and (max-width: 1200px) {
    	.footer-widgets,
    	.site-footer {
    		max-width: 960px;
    	}
    }
    
    @media only screen and (max-width: 1023px) {
    	.footer-widgets,
    	.site-footer {
    		max-width: 768px;
    	}
    }
    
    @media only screen and (max-width: 800px) {
    	.footer-widgets,
    	.site-footer {
    		max-width: 630px;
    	}
    }

    Similar issue is happening to spacing below the slider, the HTML structure is different on two sites, instead of all content being in #ez-home-container-wrap div they are being showed after that container.
    Alternative solution with only CSS changes would be adding this code:

    #ez-home-container-wrap {
    	margin-bottom: 0;
    }

    You can use plugin like this one for adding custom CSS code:
    https://wordpress.org/plugins/simple-custom-css/

    However I would still check if there were any changes to your theme before going with CSS fixes.

    Best regards,
    Predrag

  • Maria

    Many thanks for your response Predrag,

    I have used Genesis Extender with this site so am able to add custom css there, but as you suggest looking a bit further may find the solution.

    I have looked at the theme on the dev site (tpiver5) and the live site and both are using the same version of the theme Executive Pro 3.1. so no changes there.

    Other plugins I have checked that have been updated are as follows, this is all of them.

    - Genesis Latest Tweets
    - Genesis Responsive Slider
    - Recent Posts widget extended
    - Simple Social Icons
    - Social media widget
    - WP Worker WP
    - Pagelist
    - Google Analytics
    - Contact Form 7
    - Akismet

    I have all previous plugins so I guess i could test which one breaks the dev site, and then replace it on the live site.

    It would be good to try and find out the solution - It was quite a heaving customised site for widgets etc. using Genesis extender, with widgets added then hooked into an area.

    Both dev and live look the same in this area, so I am wondering what has 'busted the footer' out of the container #ez-home-container-wrap

    Could I send you the login to have a quick look before I try replacing the plugins or adding the css ?

    All the best,

    Maria

  • Maria

    Hi Pedrag,

    Many thanks again for this. I updated all the plugins on the dev site and no problem with them at all, so that's not the issue.

    I have applied your css fixes via the Extender custom css area, which I think would work the same way as the simple css edits you mention.

    My last fix on this is to adjust the space above the footer also, so both sites match, it then all look ok, many thanks for that.

    I am about to do a restore from my backups to a test domain to see if the error occurred somehow during the update plugin process I was doing with WP Manage. I backed it up just prior to the updates and all looked just fine then.

    Thanks again for your help, has been a life saver.

    Maria

  • Predrag Dubajic

    Hi Maria,

    Glad to hear these fixes worked for you, however I still suggest that you try looking into the code somewhere to see if there is any HTML tag that is not closed properly as that might cause the issue you are seeing.

    If you are using any of the plugins to add custom HTML code to header or somewhere else on the page I suggest to start by checking that code and make sure all tags are closed correctly.

    Best regards,
    Predrag

  • Maria

    Thanks Predrag, yes I am looking into it today. Its bugging me that is has happened, there has to be a reason. I'm about to re-instate the backup site ( just before the error occurred ) and see if that is ok. If it is I will look through the custom HTML code to see if there are any differences at all.

    I am using Genesis Extender to add custom code but made no changes to this before updating the plugins.

    Thanks again, Will let you know how I get on.

  • Maria

    Hello Predray - I have duplicated the live site from backup to here http://www.tpi.definemedia.co.uk/ and the error is still there, so absolutely nothing to do with plugins. I am wondering if here is anything further you might be able to help me with here.

    I'm at a bit of a loss to see what might be going on now, but at least can have a play around on this site without messing things up on live and try and find the answer.

    I am suspecting the Genesis Extended plugin as I have set that to 'take over' the home page - BUT, the settings are the same on this and the dev site which looks ok.

    Any further help appreciated, though very pleased already that the css is 'taming' thins on the live site.

    Does the attached screen grab offer any clues ?

    I have also copied the html from both the dev site ( OK ) and the test site ( not OK - copy of live before fixes ) and am scouring them for differences but going cross eyed.

    All the best,

    Maria

  • Predrag Dubajic

    Hi Maria,

    Unfortunately screenshot doesn't give me any additional clues on what could be the issue here, but I would be happy to have a closer look at your staging site if you could grant me support access.

    To enable support access you can follow this guide here:
    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/
    Please reply here once support access is granted.

    Best regards,
    Predrag

  • Maria

    Hi Predrag, I have granted support access now.

    Sorry the screen shot probably didn't help, what I was trying to indicate was genesis extender has been used to customise the home page, the widgets that seem to have 'jumped out' of the main content area are added via extender in new widget areas.

    I have granted access to this site - http://www.tpi.definemedia.co.uk/ the duplicate of the live site and also to here http://www.tpiver5.definemedia.co.uk/ which is working as it should be with the same method.

    Thanks once again for you help in tracking down what may have broken the layout.

    All the best,

    Maria

  • Predrag Dubajic

    Hi Maria,

    Thanks for granting access.

    I was looking through your sites and on one that has footer issues I tried to check your home page content from widgets, but widget fields are not expandable because of JS error in console.

    This doesn't happen on other site so it looks like one of updates broke the functionality of widget area.
    Could you try disabling plugins one by one so we can see which one is causing this?

    Best regards,
    Predrag

  • Maria

    Hi Predrag,

    I have narrowed it down a little - the plugin that was causing the error was Genesis Extender, the settings are such that this has control of the home page and various widgets and set with it and hooked into different areas. Turn it off and the footer jumps back into place.

    I looked further at this area and deactivated the various widget areas, and it seems that the one causing the problem is the one that houses the slider, search and events text - when I deactivate this area the layout returns to normal. That's good getting closer.

    I have deactivated the individual 'Genesis Responsive Slider' plugin it makes no difference so the problem appears to be with the widget area.

    Next I tried creating a new widget area for this, copying the short codes and deactivating the old one but the problem persists. Are there are any further suggestion you could give to fixing the underlying problem.

    Many thanks indeed for you help.

    Maria

  • Maria

    Wow, that's brilliant ! that is so satisfying to finally find it. This text area is edited by my client, and the error has crept in there.

    Thank you so much, your instinct was right that it was a missing tag, that's what comes with experience.

    You have been a star, and I have learned a lot.

    Will now remove the 'fix' from live, replicate this and let the client know - although they probably haven't noticed anything at all :slight_smile:

    All the best,

    Maria

  • Predrag Dubajic

    Hi Maria,

    I'm glad we managed to find a solution with combien forces :slight_smile:

    I would like to suggest you to install some text editor like SublimeText, NetBeans, Atom or anything similar that will help you finding such things in code.
    When you paste the code in editor you can click on opening or closing tag and the editor will highlight where the other part is, if there is one, and that way you'll know if anything is missing :slight_smile:

    Have a great weekend!

    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.