Archived topic
Styling for Gutenberg .alignfull and .alignwide
4 replies · Started by Vijay on March 29, 2018
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?
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%;
}Awesome thanks Tom, works like a treat.
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;
}Interesting, thanks for sharing!
