Close
not-full-width

How to maximize the width of the web display for twenty twenty X wordpress themes

When we use the twenty twenty – X default WordPress themes, sometimes we find that the width of the content (container) does not match the width of the title. So that the display on our computer screen becomes less pleasing to the eye. Yes, because the default twenty twenty themes container doesn’t default to full width.

themes twenty twenty not full width

So like this, for example, the title is very wide, while the content is only half of it

When viewing on a cellphone, there really isn’t a problem, it’s just cool, but when it’s on a new high-resolution laptop, it doesn’t feel pleasing to the eye.

To work around this, you can use the following twenty twenty custom full width themes:

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

Enter the code above in your custom CSS theme wordpress.

additional CSS customizing wordpress

additional CSS customizing wordpress

This post is also available in: Indonesian

Silakan berikan komentar, pertanyaan, maupun sanggahan. InsyaAllah dibalas secepatnya.