[Resolved] Styling for Gutenberg .alignfull and .alignwide

Home Forums Support [Resolved] Styling for Gutenberg .alignfull and .alignwide

Home Forums Support Styling for Gutenberg .alignfull and .alignwide

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #535676
    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…

    Cover image with .alignfull class applied

    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.

    Cover image with .alignfull class applied and custom styling added

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

    GeneratePress 2.0.2
    #535830
    Tom
    Lead Developer
    Lead Developer

    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%;
    }
    #535873
    Vijay

    Awesome thanks Tom, works like a treat.

    #535877
    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;
    }
    #536272
    Tom
    Lead Developer
    Lead Developer

    Interesting, thanks for sharing!

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.