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

Posted on 14 December 2019 in WordPress
Comments: 0

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:

Tags


Comment, ask or share something...

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Do NOT follow this link or you will be banned from the site!