WordPress.org

Ready to get started?Download WordPress

Forums

[Theme: Twenty Thirteen] Title and Description on same line (10 posts)

  1. wen.wainwright
    Member
    Posted 10 months ago #

    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

  2. Andrew
    Forum Moderator
    Posted 10 months ago #

    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).

  3. Andrew
    Forum Moderator
    Posted 10 months ago #

    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.

  4. wen.wainwright
    Member
    Posted 10 months ago #

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

  5. Andrew
    Forum Moderator
    Posted 10 months ago #

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

  6. wen.wainwright
    Member
    Posted 10 months ago #

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

  7. wen.wainwright
    Member
    Posted 10 months ago #

    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.

  8. Andrew
    Forum Moderator
    Posted 10 months ago #

    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">.

  9. Andrew
    Forum Moderator
    Posted 10 months ago #

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

    h1.site-title,
    h2.site-description { display: inline; }
  10. wen.wainwright
    Member
    Posted 10 months ago #

    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.

Reply

You must log in to post.

About this Topic