2

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);
}
3
  • Posts, pages basically everywhere. Everywhere it is narrower than rest of content such as header, footer etc. How can we make the content area to be in same width as header/footer?
    – Raymond
    Dec 2, 2021 at 16:22
  • Added clarification and image, hope it helps.
    – Raymond
    Dec 2, 2021 at 16:28
  • Not true, I can add a css code to make this width 100% so it is doable. All I want to know is how to make this width exactly same as header/nav. I'm not sure how do they calculate it by default.
    – Raymond
    Dec 2, 2021 at 16:31

2 Answers 2

3

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);
    }
}
0
0

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;
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.