Use full width of page for text on MOBILE

Hi Florian,

first of all; many thanks for adressing your issues here. Thank you for posting.

you wrote:

There is lots of space on the left and on the right and I would like use the whole width of the page to display the content?

well – regarding the full-width of the theme-twenty-twenty:

i guess the simplest way for turning the theme to full width (itself) would probably be adding the following into

Appearance->Customize->Additional CSS when logged into your admin dashboard

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: 90%;
}

You can adjust the 90% value to your liking depending upon how wide you’d like to have the content.

we have got several options:
– Child Themes? Do you know much about CSS?

and besides this: we re able to do something with
– Dashboard>Appearance>Customiser>Additional CSS.

here is the codex link to understand how it works with examples: body class
for custom category template, but genearlly spoken the code – we can apply here could be: (note: we need to add this code to functions.php of a child theme)

That code will add the class “template-full-width” to all pages

add_filter( 'body_class', 'custom_class' );
function custom_class( $classes ) {
    if ( is_page () ) {
        $classes[] = 'template-full-width';
    }
    return $classes;
}

but besides this: there is also this CSS solution more simple:

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

and having said this – the simplest way would probably be adding the following into the following option:

Appearance->Customize->Additional CSS when logged into your admin dashboard

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: 90%;
}

here we can adjust the 90% value to your liking depending upon how wide you’d like to have the content.

It would depend on the page that you’re wanting to have the full template on. If it is across the entire site, then most likely not recommended because of how left/right aligned elements are placed in the content area.

That said, the following CSS applies a full width to a cover template

.post-template-template-cover #site-content .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	max-width: 100%;
}

You could target a specific post by finding the post ID and adding it onto the end of the .post-template-template-cover class

.post-template-template-cover.postid-1785 #site-content .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	max-width: 100%;
}

dear Florian, i hope that helps you

i look forward to hear from you

regards Tanger

• This reply was modified 3 years, 1 month ago by tangermaroc.