Display glitch in comments…

  • Resolved dangillmor

    (@dangillmor)


    10 years, 9 months ago

    Not sure what’s happening here, but my comments are showing up with the name of the commenter on top of the comment itself. Example:

    https://dangillmor.com/2014/06/05/a-twitter-conversation-with-marc-andreessen-re-snowden-silicon-valley/

    Ideas?

    I’ve added the following to my CSS Stylesheet Editor (Jetpack) to clear up some other issues:

    .entry-title {
	font-size: 36px;
}

.entry-content, .entry-summary, blockquote p, .comment-content {
	font-size: 16px;
}

blockquote {
	margin-left: 40px;
}

p {
	margin-bottom: .9em;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	/* Styles */

}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
	/* Styles */

}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
	/* Styles */

}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	/* Styles */

}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	/* Styles */
	.entry-title {
		margin-left: 285px;
	}
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	/* Styles */

}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
	/* Styles */
	.entry-title {
		margin-left: 285px;
	}
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
	/* Styles */
	.entry-title {
		margin-left: 285px;
	}
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
	/* Styles */

}
Viewing 9 replies - 1 through 9 (of 9 total)

  • Hi there – I tested Ryu’s commenting on my test site and it’s looking as expected: https://cloudup.com/cIJtdEjgupn

    Here are some troubleshooting steps to determine what’s causing the issue on your site:

    1) Remove all your custom CSS temporarily and see if that solves the issue. If it does, add it back one or two declarations at a time to find the culprit.

    2) Disable all your plugins and see if the issue goes away. If it does, reactivate one-by-one to find the culprit that’s interfering.

    You haven’t edited any of the theme files directly, right – only made those additions in Jetpack’s CSS editor?

    Let me know how it goes.

    Hi dangillmore,

    I had a quick look at your css changes and can’t see that it caused any of the changes you see in the comments.

    Here is a simple css fix for your problem:

    In the genericons.css file under jetpak/_inc/genericons/genericons.css you can change the following line in the .genericons class from this
    display: inline-block;
    to this
    display: inline;

    or in the styles.css of your theme you can add this class

    .genericon {
display: inline !important;
}

    Let me know if this works for you.

    Regards

    Ernest Close

    @ernestclose:Thank you contributing to the forums but please do not encourage people to edit theme or plugin files directly. At best, they will lose all of their changes when they update the theme or plugin. At worst, they could bring their site down. They should be recommended to create a child theme or use a custom CSS plugin for their changes.

    Yes I agree, Adding the above style to a child theme or custom css plugin will be best.

    Ernest – thanks for the input about the Jetpack CSS interference.

    Dan, let us know if that piece of CSS Ernest provided fixes the issue for you. You can add it to your CSS editor along with the rest of your custom CSS.

    We’re going to fix the next version of Ryu so this conflict doesn’t exist anymore, I’ll keep this thread updated.

    Thread Starter dangillmor

    (@dangillmor)

    That worked perfectly.

    Thanks, Ernest and Kathryn…

    Always a pleasure.

    Version 1.3.1 of Ryu is now available and should fix this issue. The custom CSS workaround should no longer be needed, but just let me know if you spot any issues.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Display glitch in comments…’ is closed to new replies.