Categories
Blogs Free Open Source Software (FOSS) Free to use Wordpress

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Discover more from Just Shared on Tel-U

Subscribe now to keep reading and get access to the full archive.

Continue reading