如何在二十一二十一主题中使内容区域全宽？

Question

我有一个儿童二十一主题，我想让内容区域完整。我不想使用任何插件。我搜索并发现在 CSS 中添加以下代码可能有效，但对我来说它不起作用。

如果可以的话如何用css来做？

澄清一下，2021 年页眉、页脚等比主要内容区域（例如帖子内容、页面内容等）更宽。

我们如何使内容区域（帖子、页面、列表）与页眉/页脚具有相同的宽度？

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

Answer 1

在 WordPress 中要更改样式，您需要使用检查代码并获取 CSS 定义，然后对其进行修改。这并不难。 尝试以下代码，您可以在 https://ajaytechie.com/wordpress/how-to-change-width-of-post-content-area-in-twenty-twenty-one-wordpress-theme.html 上看到更多说明 在我的博客上，您还可以看到它的实时运行。

/* 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);
    }
}

Answer 2

请使用以下样式

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

Answer 3

可以选择更改容器的宽度，无需添加 css 。 将鼠标悬停在外观上，然后转到编辑器，然后转到样式，单击铅笔图标，在右侧您可以看到布局，只需单击它即可。

现在您可以更改标题“wide”下的宽度。

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