[Resolved] Styling for Gutenberg .alignfull and .alignwide

[Vijay]

Hi Tom,
Love the Page Builder Container Layout option in GP. Works great with elementor to use the Full Width option.
I am testing Gutenberg and prefer the ‘Default’ option to provide standard theme default margins and padding.
I was trying to use the technique described in this codepen: CSS Only Full-width Image Where Parent Div is not Full Width to style the full width images.

The cover image with .alignfull class applied was looking like this…

I applied the below code.

.alignfull {
    width: 100vw;
    display: block;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

The cover image with .alignfull class applied and custom styling after I applied the above code.

Do you have any custom CSS to style the .alignfull and .alignwide whilst using ‘default’ or ‘contained’ Page Builder Container Layout options?

[Tom]

Perhaps try this instead?:

.alignfull {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	text-align: center;
}

.alignfull img {
	width: 100%;
}

[Vijay]

Awesome thanks Tom, works like a treat.

[Vijay]

The .aligncenter and .alignwide were not working correctly though (displaying as block but image aligned left). Adding the below code fixed the issue.

.alignwide,
.aligncenter {
	text-align: center;
}

[Tom]

Interesting, thanks for sharing!

[Author]

Posts