Revolution Pro full width image on homepage

[eppiemcm]

Hi,
I have tried to edit the css to achieve this (making the main image 100% wide) as I have done in many SP themes and is usually straightforward, but it seems to conflict with the Gutenberg CSS on front-end.css. And I don't want to go near it:

.page.full-width-content .entry-content .alignfull, .single.full-width-content .entry-content .alignfull {
    margin-left: calc(-960px / 2 + 100% / 2);
    margin-right: calc(-960px / 2 + 100% / 2);
    max-width: 960px;
}

All help appreciated, I am having a 'slow' day!

http://helen-ssgj.temp-dns.com/

[Marcy]

Revolution Pro has two media queries for .alignfull that you would need to change.

@media only screen and (min-width: 1000px) {

	.page.full-width-content .entry-content .alignfull,
	.single.full-width-content .entry-content .alignfull {
		margin-left: calc(-960px / 2 + 100% / 2);
		margin-right: calc(-960px / 2 + 100% / 2);
		max-width: 960px;
	}
}

and

@media only screen and (min-width: 1240px) {

	.page.full-width-content .entry-content .alignfull,
	.single.full-width-content .entry-content .alignfull {
		margin-left: calc(-1200px / 2 + 100% / 2);
		margin-right: calc(-1200px / 2 + 100% / 2);
		max-width: 1200px;
	}

	.page.full-width-content.custom-page .entry-content .alignfull {
		margin-left: -200px;
		margin-right: -200px;
		max-width: 1200px;
	}
}

You could also try to do it this way instead
https://www.billerickson.net/full-and-wide-alignment-in-gutenberg/

---

Marcy | Amethyst Website Design | Twitter

[eppiemcm]

Marcy, thank you so much, you pointed me in exactly the right direction and thankfully all working now. Apologies for delayed response, these emails must get caught in the spam - I thought it hadn't been answered.

[Geek Dom]

Hi eppiemcm, can you please share what you did to get the full width image on the homepage. I'm trying to do the same with Revolution Pro. Thanks.

[nurserowan]

Hi Marcy. I've tried your suggestion but my full width images are still not extending to the edge of the screen. Can you please take a look and see what I'm doing wrong?

Thanks

[Marcy]

You have to find and change the sections listed above in
/revolution-pro/lib/gutenberg/front-end.css.

@media only screen and (min-width: 1000px) {

	.page.full-width-content .entry-content .alignfull,
	.single.full-width-content .entry-content .alignfull {
		/*margin-left: calc(-960px / 2 + 100% / 2);
		margin-right: calc(-960px / 2 + 100% / 2);
		max-width: 960px;*/
		margin-left: calc(-100vw / 2 + 100% / 2);
		margin-right: calc(-100vw / 2 + 100% / 2);
		max-width: 100vw;
	}
}

@media only screen and (min-width: 1240px) {

	.page.full-width-content .entry-content .alignfull,
	.single.full-width-content .entry-content .alignfull {
		/*margin-left: calc(-1200px / 2 + 100% / 2);
		margin-right: calc(-1200px / 2 + 100% / 2);
		max-width: 1200px;*/
		margin-left: calc(-100vw / 2 + 100% / 2);
		margin-right: calc(-100vw / 2 + 100% / 2);
		max-width: 100vw;
	}

	.page.full-width-content.custom-page .entry-content .alignfull {
		/*margin-left: -200px;
		margin-right: -200px;
		max-width: 1200px;*/
		margin-left: calc(-100vw / 2 + 100% / 2);
		margin-right: calc(-100vw / 2 + 100% / 2);
		max-width: 100vw;
	}
}

---

Marcy | Amethyst Website Design | Twitter

[Rob Mc]

I appreciate the help here, as this issue has been driving me crazy.

However, I have to ask, why did the theme designers consider this theme "gutenberg ready" when the full width doesn't work? Not for hero image blocks, atomic block containers, or anything else?

I feel that the theme should comply with all aspects of the Gutenberg block formatting - allow the owners/designers to choose how to implement it. That I have to track down basic functionality in the forums, then update my theme, just to get it to work as advertised is really disappointing, not to mention frustrating.

[Marcy]

That's really a question to ask StudioPress. We don't know the answer to that question.

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts