Support » Themes and Templates » [Theme: Twenty Thirteen] Title and Description on same line

  • I’d like the description to be on the same line as the title. I’ve tried changing the max-width for the title to 30% which didn’t help. I’ve got the description clearing: both and float: right…it floats right 🙂 I tried (unsuccessfully) to move the description <h2></h2> to inside the <h1></h1> in the header.php. That didn’t work either.

    I’m working on a test site: http://www.siteproject2.wendywainwright.com

    *Yes, I have a child theme for everything

Viewing 9 replies - 1 through 9 (of 9 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    In CSS to get things side by side the easiest thing you can is float them
    http://css-tricks.com/all-about-floats/

    Try floating left the two elements you want side-by-side (the h1 and h2).

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    I’ve tried changing the max-width for the title to 30% which didn’t help

    What was it before? It needs to be wide enough to hold both the titles and 30% is not wide enough.

    I think it was 100% by default. If the <h2> is not inside the <h1> would it still hold both?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Try setting it back to 100% and floating the two headings left.

    When I set both to clear: left they disappeared entirely.

    I appreciate your looking into this, but unfortunately Twenty Thirteen just isn’t working for this project so I’m going to return to Twenty Twelve. If you have figured out how to make this change I’m happy to plug it all back in and test it and then if someone else wants to do it the directions will be here. So I’ll leave this “open” for a bit.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    The div wrapping the headings also has a class of site-title, so make sure to apply the float style specific to the h1 and h2, e.g

    h1.site-title,
    h2.site-description

    You should also avoid clearing the headings, that will undo the float. The element you can add a clear to is <div id="page">.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Or instead of floating and clearing elements, just add this CSS:

    h1.site-title,
    h2.site-description { display: inline; }

    I was able to get it to work with the last example however styling it is another story. It must have a span around it somewhere or something like that because it uses an underline with or without you – or I was tired and missed something. But in general it does work. I wound up telling it to not display the title and description and then added a text widget of them in the sidebar.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘[Theme: Twenty Thirteen] Title and Description on same line’ is closed to new replies.