Line break in page/site title

  • Hello,

    I’m hoping to get some assistance regarding my page/site title. I have a site title that is used at the top of every page, that acts as a link back to the homepage.

    I am wanting to add a line break (actually 2) into the title so that I can format it to look a certain way. My hope is that adding the line breaks will help me control to some degree, which words are on each line of the title, when displayed on desktop, tablet and phone. I hope that makes sense! I’m super new to all of this so I’m learning as I go.

    If you go to my site that I’ve linked you can see that the site title reads (on desktop):

    INSPIRED BY THE
    WORLD DECOR &
    DESIGN

    I’d prefer to add some line breaks so that it reads:

    INSPIRED BY
    THE WORLD
    DECOR & DESIGN

    I know it will change for tablet and phone but I still think it would look better.

    I’ve tried using the Page Title Splitter plugin and just couldn’t get it working at all. I also tried to use the code below, putting it into this part (functions.php.) of the Blockbase code, and again nothing happened. When I added [br] or <br> to the site title text you could see that text, not a line break.

    function line_break_shortcode() {

     return ‘<br />’;

     }

    ?add_shortcode( ‘br’, ‘line_break_shortcode’ );

    I’m not sure if I’m just making a silly mistake or missing something completely. As I mentioned, this is the first time I’ve ever tried anything like this and I’ve now spent sooo many hours just trying to add a line break! Any help would be greatly appreciated!

    Thank you in advance!

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

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

  • Hey there,

    Happy to help you with this.

    So it looks like you’ve got a title, placed in the centre of three columns. It is possible to create a soft line break by holding shift and then enter to move the text down a line.

    I’ve taken a look at the site and it looks like there’s some custom CSS there – to check have you added CSS to try and make the line break?

    Thread Starter inspiredbytheworld

    (@inspiredbytheworld)

    Hi Adam,

    Thanks so much for offering your assistance!

    Yep that’s exactly it. A title in the centre of three columns. I tried the soft line break and nothing happened. The text didn’t move or change at all.

    Oops, I thought I had deleted all the custom CSS attempts! I have deleted that now. That was an attempt to fix a weird text break/ wrap that was occurring and breaking up the word DESIGN. I realised though that I just didn’t have spaces between DECOR & DESIGN, which was a silly mistake but an easy fix to the word wrap issue.

    I haven’t added any custom CSS apart from what I mentioned above to try and fix the line break issue.

    Cheers!

    Hey there,

    No problem – happy to help!

    I don’t think CSS would help you hear, mainly because of the responsive nature of the blocks.

    I’d recommend adjusting the width of the column: https://wordpress.com/support/wordpress-editor/blocks/columns-block/#column-width

    Additionally, if that doesn’t work, you may wish to use a layout block instead: https://en.support.wordpress.com/wordpress-editor/blocks/layout-grid-block/

    I hope this helps so far.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Line break in page/site title’ is closed to new replies.