Update Broke on Firefox :(

[Phillip Allen]

I applied the update and my site won’t display correctly on some machines and on Firefox. Thoughts? Featured posts won’t load and the header is large and the footer won’t load etc.

https://dev.globaldisciples.org/

 

[Andy]

There is nothing in the theme that would cause this problem.

Looking at your site, it seems the slider plugin “Slide Anything” that you are using in the header is forcing the page width to be 652729px wide!
Sorry, don’t know why this is because it is not our plugin and I am not familiar with that particular plugin. Does it have some settings that can be tweaked? Did you update this plugin at the same time, it could be something in the plugin that has changed from a previous version?

The featured posts, page content and footer are there on the page, but you need to scroll across horizontally to see them in the center of the 652729px wide page.

[Andy]

Also noticed that you have some custom code in your child theme that is inserting html code in each of the featured services text area, like so:

<div class="container">
<div class="row">
<div class="col-md-4 col-xs-12">
<div class="image-text-overlay text-middle-center" style=
        "background-image: url(/wp-content/uploads/2018/10/sharerect1.png);"></p>
<p>
            <span class="overlay-title">News & Stories</span>
                    </p>
<div class="overlay-white"></div>
</p></div>
</p></div>
</p></div>
</p></div>
</div>

This is not part of the Trusted Pro theme, and the custom CSS in your child theme is telling each container to be a minimum of 1200px wide, so all of these multiplied is also going to force this part of the content to be wider than most screens.

The html markup above also has a lot of closing paragraph tags </p> without any corresponding opening tag <p>. To be honest there are a lot of html/css errors in your custom child theme, so I would recommend asking the person who created your child theme to fix these.

[Phillip Allen]

Sorry I am a bit new to all this – where in the CSS is it telling containers to be a minimum of 1200 pix? Also I have no idea where the random P tags are coming from.

[Andy]

@media (min-width: 1200px) {
.container {
width: 1200px;
}
}

is in /wp-content/themes/global-disciples-child-theme/style.css on line 86.

The Trusted Pro theme also defines the container width as 1160px by default (this can be changed in the customizer settings though) so I’m not really sure why it is needed in the child theme too.

But in any case, the container element should not be used in the text area of each featured service as it is designed to set the width of the header, page content and footer container centered within the overall full-width view.

I think the main issue is the slider plugin is possibly set to display the slides in a horizontal carousel format rather than each slide sliding into/over the previous slide, so forcing the whole of the homepage to be a lot wider than it should. It’s not only Firefox, it is also the same in Chrome etc.

See the blue highlighted code in the screenshot below which shows how the overall width of the slider is 13321 pixels wide.

[Phillip Allen]

Thanks!

[Author]

Posts