Header and content always full width on Microsoft Edge and Internet explorer

Resolved splashtool
(@splashtool)

2 weeks, 5 days ago

My site runs the twenty twenty one theme as well as the options for twenty twenty one plugin. Some content is set to normal width, some is set to wide width.

In Firefox and Chromium, the site is displayed correctly with the content respecting the given width being normal or wide.

In Microsoft Edge and Microsoft Internet Explorer, the header as well as all content are always in full width and the site looks ugly. Unfortunately, i realized after setting up the site, that a large percentage of people in my professional field are using MS Internet Explorer or Edge.

Does anyone have an idea or a helpful link on how to fix this?

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Oliver Campion

(@domainsupport)

2 weeks, 4 days ago

Hello,

This is likely that you are using the “Customizer – General Options – Align Wide Max Width” slider.

This option makes use of the var(--responsive--alignwide-width) CSS variable.

IE11 is not compatible with CSS var() variables and in order for the Twenty Twenty theme to be backwards compatible with this browser it uses a completely different stylesheet when it is detected.

Please try adding this CSS into “Customizer – Additional CSS” …

@media only screen and (min-width: 822px) and (max-width: 1440px) {
.widget-area,
.pagination,
.comments-pagination,
.post-navigation,
.site-footer,
.site-header,
.alignwide,
.wide-max-width,
.wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignwide blockquote,
hr.wp-block-separator:not(.is-style-dots).alignwide {
	max-width: calc(100vw - 200px);
}
.entry-header .post-thumbnail,
.singular .post-thumbnail,
.alignfull [class*=inner-container] > .alignwide,
.alignwide [class*=inner-container] > .alignwide,
.entry-header .post-thumbnail,
.singular .post-thumbnail,
.alignfull [class*=inner-container] > .alignwide,
.alignwide [class*=inner-container] > .alignwide {
	width: calc(100vw - 200px);
}
}
@media only screen and (min-width: 1441px) {
.widget-area,
.pagination,
.comments-pagination,
.post-navigation,
.site-footer,
.site-header,
.alignwide,
.wide-max-width,
.wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignwide blockquote,
hr.wp-block-separator:not(.is-style-dots).alignwide {
	max-width: 1240px;
}
.entry-header .post-thumbnail,
.singular .post-thumbnail,
.alignfull [class*=inner-container] > .alignwide,
.alignwide [class*=inner-container] > .alignwide,
.entry-header .post-thumbnail,
.singular .post-thumbnail,
.alignfull [class*=inner-container] > .alignwide,
.alignwide [class*=inner-container] > .alignwide {
	width: 1240px;
}
}

… and if it works we will update the Options for Twenty Twenty-One plugin.

Oliver

Thread Starter

splashtool

(@splashtool)

2 weeks, 4 days ago

Hello and thank you very much for the explanation and reply!

The additional CSS in in fact setting the correct header width so that the header items are aligning with the wide width. The blocks where I defined a wide block width are displayed correctly now.

However, all other block types that are using the default normal width, including the standard text blocks, as well as, other custom block styles such as the Code Syntax Block, are still in full width even though they should be less wide than the wide block type content.

Any ideas on how to fix this?

This reply was modified 2 weeks, 4 days ago by splashtool.

Oliver Campion

(@domainsupport)

2 weeks, 3 days ago

Well, I was hoping not to have to do this because it’s really complicated haha! The responsive widths and margins are all entwined with the CSS variables and unpicking them to then produce an old school CSS version melts the brain a little.

But I think this will do what you want …

@media only screen and (min-width: 482px) and (max-width: 702px) {
	.post-thumbnail,
	.entry-content .wp-audio-shortcode,
	.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
	*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
	.default-max-width,
	.wp-block-search,
	hr.wp-block-separator:not(.is-style-dots):not(.alignwide),
	.entry-content > .alignleft,
	.entry-content > .alignright,
	.author-bio,
	.search-form {
		max-width: calc(100vw - 100px);
	}
	.author-bio.show-avatars .author-bio-content {
		max-width: calc(100vw - 190px);
	}
	.entry-content > .alignleft,
	.entry-content > .alignright {
		margin-right: 50px;
	}
	.entry-content > .alignleft,
	.entry-content > .alignright {
		max-width: calc(50% - 50px);
	}
}
@media only screen and (min-width: 703px) {
	.post-thumbnail,
	.entry-content .wp-audio-shortcode,
	.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
	*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
	.default-max-width,
	.wp-block-search,
	hr.wp-block-separator:not(.is-style-dots):not(.alignwide),
	.entry-content > .alignleft,
	.entry-content > .alignright,
	.author-bio,
	.search-form {
		max-width: 602px;
	}
	.author-bio.show-avatars .author-bio-content {
		max-width: calc(602px - 90px);
	}
	.entry-content > .alignleft,
	.entry-content > .alignright {
		margin-right: calc(0.5 * (100vw - 602px));
	}
	.entry-content > .alignleft,
	.entry-content > .alignright {
		max-width: calc(0.5 * 602px);
	}
}

If it does, I’ll update the Options for Twenty Twenty-One plugin with this as well.

Oliver

Thread Starter

splashtool

(@splashtool)

2 weeks, 3 days ago

Hi Oliver, thank you so much, adding the custom CSS from both of your posts did it and solved the issue!

Oliver Campion

(@domainsupport)

2 weeks, 3 days ago

OK, that’s great news, thanks!

Oliver