How To: Tweak Disqus CSS for Twenty Fifteen Theme

After installing the twenty fifteen theme I found that disqus’ comments were butting up against the edges of the layout.

You can fix this by adding the following Custom CSS

 

@media screen and (min-width: 59.6875em) {
	#disqus_thread {
		margin-top: 8.333%;
		margin-left: 8.333%;
		margin-right: 8.333%;
	}
}

@media screen and (min-width: 38.75em) {
	#disqus_thread {
		margin-top: 7.6923%;
		margin-left: 7.6923%;
		margin-right: 7.6923%;
	}
}

Border-Radius Broken in Webkit?

Border-radius with a background image appears to be broken in webkit (tested in both Chrome and Safari on Mac). Check out how much the background colour bleeds over the corner. Is this a known issue? I came across this randomly on the Winnipeg Free Press mobile site. It looks like the same issue is not affecting the WordPress UI I’m currently typing it.  I haven’t had time to try to duplicate the issue yet. What are the combination of factors that cause this bug to appear?

Bizzare Firefox 3 HR Tag Rendering

I stumbled across this bizare new rendering bug in Firefox 3.

CSS:

hr {
	background: url("bar.gif") no-repeat;
	width: 385px; height: 15px;
	border: 0;
}

HTML:

<hr noshade="noshade" />

Here’s what it looks like in Firefox 2.

Now Firefox 3.

It would appear that Firefox 3 is adding a border-radius value to all <hr/> tags. Removing the noshade=”noshade” property, or adding -moz-border-radius: 0 in the css will remove the rounded edges.

Check it out.