Is there a way to change the width of the blog from boxed to full width?

Asked on May 17, 2016 in Customization.

Is there any way to make the blog section full width instead of the boxed version?
Also, is there a way to increase the width of the sidebar?

  • Possible Answers to Your Question:

  • 1 Answer(s)
    Answered on May 20, 2016.

    Hi there,
    If you need the blog index pages to be full width, we recommend using a Layers page and the Post widget to create a full width layout. This allows you to control the style and the margins to ensure it is readable at all screen sizes.

    Currently we do not offer this as an option on single posts as it would cause the text to become so wide as to be extremely uncomfortable to read for most people on desktops. The optimal width for a text column is 720 pixels, which is why you see boxed content on sites like the New York Times and Washington Post. If you need to make it full width to accomodate plugins like Aesop Story Engine, or are using a 2 sidebar layout, you can add the following to the CSS panel in the customizer:

    For single posts:

     .single .content-main.container{max-width: 100% !important;}

    If you implement the above, it is really important your plugin allows boxing of any text content to ensure it is never wider than 1000px

    For the post list pages:

     .archive .content-main.container{max-width: 100% !important;}

    The sidebar uses the framwork grid to adjust the width based on the overall screen size and will widen automatically when the above is applied. I do not recommend trying to force a specific size as it can break widget and mobile formatting.