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

December 14, 2019

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:
About Bharat Karavadra

"I research and share leading-edge information, tools and exercises to help people transform and heal their life situations."

  • 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

    • 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

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    Bharat Karavadra
    >