Black Blocks Behind Site

Hi Steve,

Hope you’re doing well ??

It must be related to the order the CSS files are loaded. It looks like Tracks’ stylesheet is loaded and then a moment later the custom CSS is loaded. I have a couple of ideas to solve this.

First, in the plugin you’re using to add Custom CSS, check if there’s an option to “inline” the CSS instead of loading a new stylesheet. Otherwise, you could copy the CSS out of there and paste it into the Additional CSS section in the Customizer, and that will ensure it’s inlined.

Perfect as always, Ben! Thank you

You’re welcome ??

Although having said that… does it look ok on mobile to you? It seems OK on my laptop but there are black blocks on the site when I use my phone. Weird…

This code should fix that:

.top-navigation {
  background: #fff;
}

It looks like this code is already present in the CSS but it’s inside a media query that only targets the screen when it’s 56.25em (900px) or wider.

Thanks Ben – no luck though, unfortunately. I also see black rectangles above my featured images on the main page when viewed on mobile.

Try adding an !important tag, like this:

.top-navigation {
  background: #fff !important;
}

If that doesn’t work then this means the site’s cache needs to be cleared, and potentially, the mobile device’s browser cache as well.

Thanks Ben – worked now but at the expense of my social links and there are still black blocks above the featured images.

Oh, my footer seems to have gone all huge too!

This will fix the black background above the Featured Images:

#main {
  background: #fff;
}

Same thing as before: the cache may need to be cleared for it to apply.

As for the footer text, I’m seeing this code in the Custom CSS making it very large:

.site-footer .design-credit {
    font-size: 100px;
}

Maybe that was in a media query previously so it only applied to larger screen sizes?

Thank you – I’ve resized the text and the black blocks have all now disappeared. Please can you help me get the social icons to show again and remove the black background behind the design credit text in the footer?

Cheers Ben

Oh God… also (I’m so sorry about all this), some of my featured images on the main page have decided to go all misaligned somehow. I don’t what I’ve done here or what’s caused it – I thought it was all running smoothly until yesterday!

That’s so weird. I’m not sure what would cause these sudden changes.

Try out this CSS for fixing the Feature Image alignment:

.excerpt {
  width: 100%;
}

And this should work for the social icons:

.social-media-icons a,
.social-media-icons a i {
  color: #f26660;
}

As for the footer text, I see this CSS on the site already:

.site-footer p {
    background-color: #ffffff;
    color: #f26660;
    font-size: 15px;
}

But it’s also wrapped in a media query affecting 56.25em width screens. If you take that code out of the media query it will affect mobile screen sizes too.

Thanks again, Ben – all that seems to be OK now (said with a little bit of trepidation…).

The only thing to clear up is the background of the footer text on mobile (it’s gone kind of grey with a black border) but I can probably find that, and the meta info above the posts on the main page for some reason has gone grey instead of #f26660. Otherwise, it seems to be back to normal again. Not sure if it was an update or something that threw it all out of whack.

Thanks for your patience.

Steve

The pattern I’ve been seeing is that a lot of the CSS is included inside a media query when it’s meant to affect mobile too. An extra or missing curly brace “}” in the wrong could place could make something like that happen suddenly. There is CSS already present to make the footer background white, but that is inside a media query so the footer is still dark gray on mobile devices.