Mini problem with Monochrome.

[ShmickMick]

Hi there,

My site running on the Monochrome Pro child theme has something a little different to the demo. For example on my blog home page, the side of the black footer can be seen right from the top of the page:

https://homeschooledkid.com/blog/

In the demo, however, it's all white until the visitor actually scrolls down to the bottom of the page:

Why White Space and Typography Matter in Minimal Design

It's the same for every page actually, however the blog home page is the one I am concerned about. I want it to be the same as the demo.

Any help would be greatly appreciated. Any ideas?

Regards,
Michael

https://homeschooledkid.com/blog/

[andytc]

You seem to be missing the z-index from the site footer css , reason unknown ?

Theme demo entry -

/* Site Footer
---------------------------------------------------------------------------------------------------- */

.site-footer {
	background-color: #000;
	bottom: 0;
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 1;
	padding-bottom: 40px;
	padding-top: 40px;
	position: fixed;
	text-align: center;
	width: 100%;
	z-index: -99;
}

Your site - missing z-index

/* Site Footer
---------------------------------------------------------------------------------------------------- */

.site-footer {
	background-color: #000;
	bottom: 0;
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 1;
	padding-bottom: 40px;
	padding-top: 40px;
	position: fixed;
	text-align: center;
	width: 100%;
}

[ShmickMick]

Thanks for finding that and posting.

I took that line of code out, on the recommendation of Victor who helps here on the forums, because the links in the footer were not working at all. It fixed the link problem but now seems to have caused this other mini-problem. Seems a little strange to have this glitch right out of the box.

Do you think I should contact support?

[andytc]

Do you have a pop up modal for a form active ?

I noticed when re-instating the missing z-index that the links were no longer working , but when i deleted the code connected to a "CP modal form" , the links work and the footer behaves normally with the correct z-index in place.

So , i'd be looking for the pop-up form as that;s causing the issue as far as i can tell.

Disable the form (pop-up , whatever it is) and test with the correct z-index added.

z-index: -99;

There's nothing wrong with the theme , only the missing z-index , i suspect the original problem was caused by this pop-up and was missed in troubleshooting.

[ShmickMick]

Ah okay, that's disappointing then. Now you say that, I did notice the footer change after I started using the pop-up plugin.

I assume contacting the pop-up plugin owners to ask what I can do about it is going to be the answer, but is this a common thing? I mean, pop-up plugins affecting the footer section of a website? Seems so random.

[andytc]

Because it’s a Modal window it needs to open in front of everything else , so it’s probably using some z-indexing itself , which is affecting the z-indexing of the footer by effectively placing the links behind a layer.
Try and track down the z-indexing on the plugins css , or ask the dev of the plugin if they can help, in case it’s not that at all, but something else. Either way you can be sure it’s the modal window.

[ShmickMick]

I appreciate the tips, thanks.

[Author]

Posts