Line Break in Header Text

  • Sharon

    #8336

    Hi there,

    I’ve looked all over and can’t figure out a solution to this, but how do I create a line break in my header text. My website is juiceandsmoothierecipes.com and, as you can see from the header image, I”ve created a lovely little space in which to put the header text, and I just can’t figure out how to get it in there.

    So, two issues really, I need to get the text to split over two lines, then I need to slot it into that space.

    Much obliged for any assistance. 🙂

    Sharon

    #40891

    Hi again,

    I’ve tried so many things and this just isn’t working for me. I know there must be a solution in the forum somewhere, but perhaps I’m using the wrong search terms. Among other things, I’ve tried;

    <h1 style=”><span style=”display:inline-block;”>Juice and</span><span style=”display:block;”>Smoothie Recipes</span></h1>

    and

    #header h1 {

    width: 400px;

    }

    and inspecting the element with firebug and trying to translate
    into css.

    These are just some of the things I’ve found in Google searches. I’ve also tried finding other Graphene sites where people have split their headers into two lines, but there was none I found. Most used photos…

    Any help would be great, this is driving me absolutely batty.

    Cheers

    Mod

    Kenneth John Odle

    #40892

    Have you tried just inserting <br /> in the header text in the WordPress options?

    Sharon

    #40893

    Kenneth, I did try that. I promise, I really did. It didn’t work.

    Do I need to do something in the Child Theme?

    Thanks so much for your help, I’m sorry to be such a bother…….

    Mod

    Kenneth John Odle

    #40894
    Quote:
    I”ve created a lovely little space in which to put the header text, and I just can’t figure out how to get it in there.

    The best way may simply be to include the header text as part of your image.

    You can use something like this in custom CSS:

    #header .header_title {
    bottom: 10%;
    left: 500px;
    }

    .header_title {
    max-width: 400px;
    }

    and then play around with the numbers, but it will invariably look different in different browsers. Adding it to the image will prevent that.

    Incidentally, you have 45pt in your css. Points are for print; you should use 45px for maximum compatibility.

    Sharon

    #40895

    Kenneth, I had a play around with that and……. It Worked!!

    Many, many thanks. Someone really should award you with the Order of Merlin (First Class). You truly are a wizard. (Errr, if you haven’t read Harry Potter you probably won’t get that).

    Cheers muchly 🙂 🙂

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.