CODEWITHSUNDEEP
csswordpresswordpress-theming
Raymond
Raymond

Reputation: 1258

How to make content area in full width in Twenty Twenty-One theme?

I've a child Twenty Twenty-One theme and I want to make the content area in full with. I don't want to use any plugin. I've searched and found that adding following code in CSS may work but for me it's not working.

How to do it with css if it is possible?

Just to clarify, in 2021 there header, footer etc are are wider than main content area such as post content, page content etc.

How do we make the content area (post, pages, listings) to have same width as header/footer?

enter image description here

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

Upvotes: 2

Views: 3050

Answers (3)

Mihir Parmar
Mihir Parmar

Reputation: 1

there are option to change width of container no need to add css . hover on Appearance , then go to editor , then go to styles , click on pencil icon and on the right side you can see layout just click that.

now you can change the width under title 'wide' .

https://drive.google.com/file/d/18jmFz2pQknwEy_Z5tBj9ENlGeu88PbLS/view?pli=1

Upvotes: 0

Ajay
Ajay

Reputation: 46

In WordPress to change style you need to use inspect code and get the CSS definition and then modify it. It's not that hard. Try following code, You can see more explanation on https://ajaytechie.com/wordpress/how-to-change-width-of-post-content-area-in-twenty-twenty-one-wordpress-theme.html on my blog you can also see it live in action.

/* Change the content width to be same as header/nav/footer's width */
@media only screen and (min-width: 822px) {
    :root {
        --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);
    }
}

Upvotes: 3

Bob Nowak
Bob Nowak

Reputation: 410

Please, use the following style

    .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
      width: 100%;
      max-width: 1240px;
    }

Upvotes: 0

Related Questions