Using the html block with twentig

Hi,

This CSS code is added by the Twenty Twenty-One theme, not Twentig. As specified in the CSS, it doesn’t apply to alignwide and alignfull elements :not(.alignwide):not(.alignfull)

I’ve tried to insert a custom HTML block with an alignwide class, and the width is respected. Can you please share your code so I can replicate the issue?

Thanks,
Tom

Thanks for having a look.

[menu name="instructor-menu"]
<div class="notice-box-warning">
<p>Reset course progress. NOTE! This cannot be undone. All progress will be lost!</p>
<p><strong>RESET YOUR INSTRUCTOR GUIDE PROGRESS:
[uo_reset_course_progress course_id="2181"]</p>
<p><strong>RESET YOUR HOSPITALITY ENGLISH PRO PROGRESS:</strong> </p>
<p>[uo_reset_course_progress course_id="63024"]</p>
</div>
<div class="notice-box-warning"><strong>WARNING!</strong> Using this form will change your student's course completion progress, and may have some unintended consequences.</div>
<p>[uo_groups_manage_progress]</p>

Here is the selector CSS added by Twentig:

*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), .default-max-width, .entry-content .wp-audio-shortcode, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), .post-thumbnail {
    max-width: var(--responsive--aligndefault-width);
    margin-left: auto;
    margin-right: auto;
}

Removing this rule fixes the issues.
max-width: var(--responsive--aligndefault-width);

This rule is found in: https://teach.3alearning.com/wp-content/plugins/twentig/dist/css/twentytwentyone-style.min.css?ver=1.2

It seems to to be telling divs to respect the set default width. If I wrap the whole HTML with something like <div syle=”alignwide”>CONTENT</div> this will also override the plugin CSS.

You can check out the block on a testing site here: TEST HERE

Notice how the first few divs are at default width because they are wrapped in a “<p>” tag or some other inner div, while the last lines are wide width, respecting the default TT1 CSS.

Yes the CSS is inside the Twentig plugin but it’s only the minified version of the Twenty Twenty-One style.css file. With Twenty Twenty-One, all elements which aren’t set to wide or full width take the default width. If you want to override this behavior and make all the elements inside your group wide, you can add some CSS. I see that you’ve added a custom widewidth class to your group. Add the following CSS inside the Customizer > Additional CSS panel:

.widewidth [class*=inner-container] > * {
    max-width: 100% !important;
}

The shortcodes on your test site don’t work, so I can’t see what layout you’re trying to achieve, but the code above should work.

Hope that helps,
Tom

Ok that makes sense thanks for the reply. Love your plugin!