• Resolved lijitimit

    (@lijitimit)


    I have been scratching my head about this. Twentig adds CSS to the gutenberg HTML block that makes it the “default text width” and does not respect adding to a group for align wide or align full, so any HTML I put into a site I need to create a div with that specific class (.alignwide).

    Is there a way to have shortcodes and HTML block respect default behaviors?

    *[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;
    }
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Twentig

    (@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

    Thread Starter lijitimit

    (@lijitimit)

    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.

    Plugin Author Twentig

    (@twentig)

    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

    Thread Starter lijitimit

    (@lijitimit)

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

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