Black Side Bar Appearing on Mobile View

  • My recent blog post is not formatting correctly and I can’t get to the bottom of it (crispvideo.com/5-basic-seo-tips). It looks perfect on web, but there is a black side bar that appears on mobile on the right side of the post.

    The post text/copy also “leaks” over into the black sidebar, rendering it unreadable.

    I have resized the photos (usually the problem when this happens) to their smallest size, checked the post code (nothing looks out of the ordinary), etc. but can’t find the cause. Any suggestions?

Viewing 1 replies (of 1 total)

  • You have an interesting CSS coding style and that is probably causing you some issues. First, I cannot see this large black bar you are talking about. Second, I do see where your text is running over the right margin. It looks like your definitions for under 480px width need adjusting. Here is a quick example of making that text fit within the view screen on a mobile phone. This is not a final solution, merely showing you where you might start.

    //Original CSS
#blog-post-content p, #blog-post-content ol, #blog-post-content ul {
    line-height: inherit;
    margin: 0 0 1.5em;
}
    //Modified CSS
#blog-post-content p, #blog-post-content ol, #blog-post-content ul {
    line-height: inherit;
    margin: 0 0 1.5em;
    max-width: 310px;
}
Viewing 1 replies (of 1 total)
  • The topic ‘Black Side Bar Appearing on Mobile View’ is closed to new replies.