Force all pages and posts to use full-width template? (Twenty-twenty theme)

  • Unknown's avatar
    stonenick · Member ·

    I’ve set all the pages on my site to use the Twenty-twenty themes’s full width template (in which most of the content is 1200 px wide), rather than the default (which is only 580 px wide).

    I have two questions:

    1. Can I force all blog posts to adopt the full-width template too? (I can set each post, individually, to use the full-width template, but ideally would like to do it at the CSS level rather than going into the settings of >300 posts one-by-one).
    2. Can I set the blog-roll (news) page to also adopt the full width template? (Even if individual posts are set to use the full width template, they still appear narrow in the blog roll.)

    Example pages:

    The blog I need help with is: (visible only to logged in users)

  • synora10 · Staff ·

    Hi there!

    Thanks for all the details here!

    For question 1, you can bulk edit your posts to change the template. This is a bit more ideal than using CSS code for this issue. We have a guide on how to bulk-edit posts at https://wordpress.com/support/posts/edit-posts-screen/#bulk-edit. Within those settings should be a drop-down to change the template for the posts.

    For question 2, CSS is a good option to have the blogroll (News page) use the full-width template. When you have a moment, please copy/paste the following CSS into Appearance > Additional CSS: 

    /* make posts page full-width | eD */
.blog .section-inner.medium,
.blog .entry-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide){
	max-width: 120rem;
}

    Let us know how that code works for you.

  • Unknown's avatar
    stonenick · Member ·

    Thanks so much @synora10. I had only used the bulk post editing feature once before and had totally forgotten it existed. This worked perfectly.

    The CSS edit for the news page worked almost perfectly. Unfortunately it has had the side-effect of placing the main body text over the top of inline images and their captions. See the 2nd post in the blogroll titled “The Conversation: Species don’t live in isolation: what changing threats to 4 marsupials tell us about the future”.

    The standalone rendition of this post (using the full-width template) does not suffer from the same side-effect.

    Any ideas?

  • Unknown's avatar
    stonenick · Member ·

    Update (sortof). I think this might be able to be fixed with a media query (but I can’t work out how).

    I’ve noticed that the images display correctly with text flowing around them up to max-width of 599 px…

    The text flows over and obscures the images from min-width 1000 px and above…

    In between (i.e. 600-999 px) the images aren’t obscured, but hang off the side of the screen.

    Regardless, on the standalone blog page (i.e. full-width template) the images display just fine at all screen sizes.

    Here’s hoping you can help, and thank you in advance :-)

  • staff-totoro · Staff ·

    Hi there,

    Can you give this code a try and see if it helps with the images?

    /* fix image alignments on blog page */
@media screen and (min-width: 660px) {
	/* fix display of alignleft images */
	.blog .entry-content > .alignleft, 
	.blog .entry-content > p .alignleft, 
	.blog .entry-content > .wp-block-image .alignleft {
		position: static;
		margin-left: 0;
		margin-right: 2rem;
		max-width: calc((100% - 58rem) / 2 - 6rem);
	}
	
	/* fix display of alignright images */
	.blog .entry-content > .alignright, 
	.blog .entry-content > p .alignright, 
	.blog .entry-content > .wp-block-image .alignright {
		position: static;
		margin-right: 0;
		margin-left: 2rem;
		max-width: calc((100% - 58rem) / 2 - 6rem);
	}
}

    Thanks!

  • Unknown's avatar
    stonenick · Member ·

    Wow @staff-totoro, you’re a genius! Thanks heaps, this worked a treat… almost.

    For small and large media queries (below 660 px or above 1000 px wide, I think) the images and text are aligned perfectly. However, for the ‘in between’ sizes, the images (and captions) display tiny; see attached image and you’ll see what I mean.

    Thanks again for your help. I was messing around with this for hours yesterday and getting absolutely nowhere.

  • Unknown's avatar
    stonenick · Member ·

    I’ve added some additional media queries. I don’t think I’m quite replicating the breakpoints and sizes of the images on the standalone blog post page (I couldn’t work them out), but it seems better now. Here’s my code:

    /* fix image alignments on blog page */
@media screen and (min-width: 660px) {
	/* fix display of alignleft images */
	.blog .entry-content > .alignleft, .blog .entry-content > p .alignleft, .blog .entry-content > .wp-block-image .alignleft {
		position: static;
		margin-left: 0;
		margin-right: 2rem;
		max-width: calc((100% - 0rem) / 2 - 6rem);
	}
	@media screen and (min-width: 800px) {
		.blog .entry-content > .alignleft, .blog .entry-content > p .alignleft, .blog .entry-content > .wp-block-image .alignleft {
			position: static;
			margin-left: 0;
			margin-right: 2rem;
			max-width: calc((100% - 28rem) / 2 - 6rem);
		}
		@media screen and (min-width: 1000px) {
			.blog .entry-content > .alignleft, .blog .entry-content > p .alignleft, .blog .entry-content > .wp-block-image .alignleft {
				position: static;
				margin-left: 0;
				margin-right: 2rem;
				max-width: calc((100% - 38rem) / 2 - 6rem);
			}
			/* fix display of alignright images */
			.blog .entry-content > .alignright,.blog .entry-content > p .alignright,.blog .entry-content > .wp-block-image .alignright {
				position: static;
				margin-right: 0;
				margin-left: 2rem;
				max-width: calc((100% - 0rem) / 2 - 6rem);
			}
			@media screen and (min-width: 800px) {
				.blog .entry-content > .alignright, .blog .entry-content > p .alignright, .blog .entry-content > .wp-block-image .alignright {
					position: static;
					margin-right: 0;
					margin-left: 2rem;
					max-width: calc((100% - 28rem) / 2 - 6rem);
				}
				@media screen and (min-width: 1000px) {
					.blog .entry-content > .alignright, .blog .entry-content > p .alignright, .blog .entry-content > .wp-block-image .alignright {
						position: static;
						margin-right: 0;
						margin-left: 2rem;
						max-width: calc((100% - 38rem) / 2 - 6rem);
					}
				}
			}
		}
	}
}
  • staff-95percentghost · Staff ·

    It definitely looks like that helped! I had a look through the CSS file for Twenty Twenty and it looks like there are a few different breakpoints there but the ones you’ve chosen so far should cover your needs for the images.

    One thing it might be worth adding is something like this, for mobile view:

    @media screen and (max-width: 782px) {
.alignleft,
.alignright {
		max-width: 100%;
		margin: auto;
	}
}

    It should stop the images from still being left/right aligned and having text alongside them on screens which are a little too small for that to work well.

  • Unknown's avatar
    stonenick · Member ·

    Thanks @staff-95percentghost I agree the left andf right-aligned images look better at 100% width on small screens like phones. I’ve added those lines of CSS.

  • Unknown's avatar
    thesacredpath · Member ·

    @stonenick, so are you happy with the results you have now?

  • Unknown's avatar
    stonenick · Member ·

    H i there @thesacredpath

    Yep! Thanks Happiness Engineers @synora10 , @staff-totoro and @staff-95percentghost for all of your help!

  • Unknown's avatar
    stonenick · Member ·

    :-)

  • The topic ‘Force all pages and posts to use full-width template? (Twenty-twenty theme)’ is closed to new replies.