Visual theme: poor display of comments on iphone

  • nilla2014 · Member ·

    Just tested my site on an iPhone and noticed that although most of the post’s content displays OK, the comments’ display is far from optimal. For example, check comments in: Normandy: Beaches and surrounds

    Is there any CSS that can fix how the commenting displays?
    Many thanks :)

    The blog I need help with is: (visible only to logged in users)

  • chad1008 · Staff ·

    Hi @nilla2014!

    It looks like these two styles in your custom CSS are causing the issue:

    .site-content {
	margin: 0 29.9% 0 0;
}

.site-main .widget-area {
	width: 26.7%;
}

    If you wrap them in a media query, you can prevent them from impacting smaller screens, like this:

    @media screen and (min-width: 767px) {
.site-content {
	margin: 0 29.9% 0 0;
}

.site-main .widget-area {
	width: 26.7%;
}
}

    With that, those style will only be triggered on screens that are at least 767px wide (which is when the sidebar switches from the side to the bottom of the site).

    Let me know if that helps! :)

  • nilla2014 · Member ·

    Thanks @chad1008, but this didn’t seem to make a difference and comments are still displaying as almost one line. Any other suggestions?

    Also, can you suggest a way to clean up (streamline) my CSS code? I plugged in my URL in a PageSpeed insights tool and this is the result:

    1. Eliminate render-blocking JavaScript and CSS in above-the-fold content
    2. Minify JavaScript and CSS
    3. Leverage browser caching

    Or should I start another thread with this one?

    Thanks!

  • chad1008 · Staff ·

    comments are still displaying as almost one line. Any other suggestions?

    It looks like you added the media query, but left the original styles in place – the media query tells the site to only use those styles on large screens, but unless you remove the original two, it will keep happening on mobile as well :)

    Also, can you suggest a way to clean up (streamline) my CSS code? I plugged in my URL in a PageSpeed insights tool and this is the result:

    I wouldn’t worry about your CSS. Minifying is when you take CSS and basically put it all on one line – faster for computers, but impossible to read/edit for a human. A lot of the CSS that powers your site is already minified behind the scenes for you anyway.

    Tools like PageSpeed tend to offer very technical results that don’t often apply to a WordPress.com site, if you’re noticing a major speed issue, let support know for sure, but beyond that you don’t need to worry :)

  • nilla2014 · Member ·

    Sorry for late response.

    Thank you for spotting the extra code, which I’ve removed. That kind of helped but still displays a little ugly. Not sure what else to try?

  • chad1008 · Staff ·

    I think what you’re looking at is the effect of Nested Comments.

    When one comment is a reply to another comment, it gets indented, to show the back and forth of the conversation.

    On a small mobile device, that ends up meaning things get a little squashed on small screens when there are more than two exchanges on a particular comment.

    A couple of possible solutions:

    1. Disable nested commenting on the site:
    – My Site > Settings > Discussion
    – uncheck the box for Enable threaded (nested) comments
    Doing this will cause all comments to display in a single, even column – replies will not be indented under one another.

    2. Use CSS to cancel the indent on deeper levels, only on small screens:

    @media screen and ( max-width: 550px ) {
    .comment-list .children .children li {
        margin-left: -75px;
    }
}

    That will keep everything on the third level and deeper on an even column. It should still be clear that there’s an ongoing conversation without.

    3. Keep the indent, but decrease it a bit on mobile.

    For this option, take the above CSS, and change -75px to another number like (for example -50px). As you approach zero the indent will get larger.

    4. Use CSS to cancel the indent on all comments on smaller screens (similar to the above, but changing all comments, not just starting on level 3)

    @media screen and ( max-width: 550px ) {
    .comment-list .children li {
        margin-left: -75px;
    }
}

    Give those a try and let me know how it goes! :)

  • nilla2014 · Member ·

    I’ve dropped the nested comments to 2 levels and also used the code in your option 4 with -30px.

    Think this is the best I will get and better than what I had, so I’m happy with this display.

    Excellent and thank you for all your help @chad1008- brilliant as always! :)

  • chad1008 · Staff ·

    Happy to help! :)

  • The topic ‘Visual theme: poor display of comments on iphone’ is closed to new replies.