How To Increase The Width Of The Content Area On The Twenty Twenty Theme

The default Twenty Twenty theme content area uses less than the full width of the screen, especially on a laptop or computer screen. The content area can be customised by increasing its width or even decreasing it.

The default width of the content area.

Video tutorial on how to increase the width of the content area.

The width of the content area increased.

The increased width of the content areas should work throughout the site (e.g. single pages, single post & blog archives).

Where and how to increase the width of the content area:

In WordPress Admin > Appearance > Edit CSS.

Enter the CSS code below and Publish the update.

  • Update the max-width 56rem value to 87rem to make the content 50% wider.
  • Update the width 4rem value to 8rem to double the width of the spaces to the left and right of the content area.

The CSS code:

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: 87rem;
    width: calc(100% - 8rem);
}

 

Post Photo by Michael Baird on Unsplash

Share this:

Subscribe for updates

Enter your email address below. I’ll send you updates & news to your email address. You can unsubscribe at any time.


Posted

in

by


Comments

2 responses to “How To Increase The Width Of The Content Area On The Twenty Twenty Theme”

  1. James avatar

    Hello and thank you for this. The code worked perfectly for me on my desktop. However, on my mobile phone, it caused the width of the content area on my mobile phone to get more narrow, and it increased the space on the left and right of the content area.

    Could you please show me the css for increasing the content area on my mobile phone to 100% as well.

    Thank you for your help,
    James

    1. Bharat Karavadra avatar

      James,

      To create a specific layout for desktop, tablets and mobile some finer customisations to the CSS would have to be created and this would be a payable service. Let me know if that is any use to you.

      However, you can reduce the number 8 where it reads 8rem and this will reduce the margin slightly both on mobile and desktop.

      Can you let me know if you require finer customised CSS for your layout?

      Thank you,
      Bharat

Leave a Reply to Bharat Karavadra Cancel reply

Your email address will not be published. Required fields are marked *

>