Increase width of the body

  • Unknown's avatar
    leoceasar18 · Member ·

    Hello.

    I would like to increase the width of the body in each blog posts. I think the width is too tight, even I didn’t put any widget in the sidebar. Is it possible to increase the width of the body through CSS?

    Also, the body is also too tight in mobile platforms (padding of 30px left and right), can we also increase the width of the body, so the content will not look too tight in mobile?

    Thank you!

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @blainechrian, I looked at your Pushing the Limits post on my laptop, and currently the text line length is at 104 characters (maximum), including spaces and punctuation, and the recommended maximum for line length is 66 characters. The reason for this is that with longer lines of text, it becomes harder for the eye to accurately move from the end of one line to the beginning of the next and make things harder for a visitor to read. It is good to also keep some whitespace to the left and right of the content on all screen sizes, and especially on mobile so that the eye has a place to land when moving from line to line.

    If you wish to widen the content, add the following and adjust as desired. It was at 748px. 

    .container .container.container-small {
  max-width: 1000px;
}

    In addition to the above, in the Media Width field below the CSS entry area, enter the same value (in the case of the above, 1000).

    On the mobile padding, the following will reduce that from 30px to 20px, which is as tight as I would recommend for readability reasons. 

    @media screen and (max-width: 768px) {
  .container, .pre-footer .widget:not(.widget_wpcom_instagram_widget), .pre-footer .widget_wpcom_instagram_widget .widget-title {
    padding-left: 20px;
    padding-right: 20px;
  }
}
  • Unknown's avatar
    leoceasar18 · Member ·

    Wow thank you for the tips :) Yes, I will adjust the body accordingly. One last concern.

    Whenever I’m in mobile mode. The “LOAD MORE” button overlaps with the Full-width Instagram Footer widget. Is there a way to adjust this through CSS? Thanks :D

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

    Interesting on the post load. I can’t reproduce that on my test site, but we can fix that with a bit of custom CSS. Add this and test on tablet, mobile and on your computer at various window widths and let me know if there are any issues you find. In my testing all was good. 

    #post-load {
    margin-bottom: 200px !important;
}
  • The topic ‘Increase width of the body’ is closed to new replies.