Overset code block?

  • Resolved jlhblwdsjhbiul

    (@jlhblwdsjhbiul)


    10 months, 2 weeks ago

    Tested on Chrome Version 117.0.5938.92 and Safari Version 17.0 (19616.1.27.211.1)

    On the “Elements” page of the Course theme demo site.

    https://wp-themes.com/course/?p=36

    In the section “Misc Stuff” (near the bottom) there is the code/monospace block. This overruns the main area width extending to the sidebar and beyond to the edge of the screen.

    Is this intentional? Other themes also have this behaviour. I have also seen a slider in a contained box to limit the text to the main column, and allow sideways scrolling. An example of this method is in the Coursemax theme.

    https://wp-themes.com/coursemax/?p=36

    Thanks,

    Ed

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • supernovia

    (@supernovia)

    10 months, 2 weeks ago

    Hi @jlhblwdsjhbiul, great question. It looks like the test there doesn’t have any block-related markup, specifically this class:

    wp-block-code

    The sample text is just using pre, which uses the browser default of no-wrap. The sample also uses Lorem. Its long lines might look better formatted as a paragraph than code with all of its manual line breaks might.

    If you want to wrap all pre-blocks regardless of class, something like this will work:

    pre {
    text-wrap: pretty;
}

    Hoping that helps!

    Thread Starter jlhblwdsjhbiul

    (@jlhblwdsjhbiul)

    10 months, 2 weeks ago

    @supernovia thanks for the reply. I’m a beginner at this. I switched from visual editor to code editor and could see what you meant when I tried to recreate it on my site.

    Appreciate your help, I learned something new today!

    supernovia

    (@supernovia)

    10 months, 1 week ago

    Cheers @jlhblwdsjhbiul !

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Overset code block?’ is closed to new replies.

Tags