Twenty eleven child: how to put site title and site description on same line

First of all, reset everything to default (meaning disregard any modifications you’ve made.)

then assign this to #site-title and #site-description

#site-title, #site-description{ display:inline-block; clear:none;}

#site-title {/* font-size and font-color margin padding  */}

#site-description {/* font-size and font-color margin padding  */}

Basically the header tag <h1> <h2> .. <h6> are block element so it’s display:block by default so we have to make it inline and also to keep the block level properties like margin that is why the display:inline-block is needed.

Edit: changed class to id ( thanks to @alchymyth )

@paulwp
you seem to be referring to Twenty Twelve with the css classes;
this is about Twenty Eleven which does use css ids.

the ‘clear: none;’ and ‘display: inline-block;’ are good recommendations.

as a pure formatting issue, this question might rather belong into a css forum like https://csscreator.com/forum

edit:
thanks ??

@alchymyth

Thanks, you are right, edited my comment above already.

and yes, i need more coffee ??

ok was confused for a moment, trying that now. thanks for both your replies!

hm.. when I add your code, it works BUT:
font color and size for the site title are defined through #site-title a{} and when I add that, it messes it up again…

my current code:

#site-title, #site-description, #site-title a { display:inline-block; clear:none;font-family: Rockwell Extra Bold;}

#site-description{font-size: 50px; color: #5f82ab; margin: 0 0 0 0; padding: 0 0 0; }

#site-title a  {
    color: #5f82ab;
    font-size: 70px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;}

It’s the margin and padding of #site-title assigned in parent theme that need to be adjusted. Use the code below, it resets everything first then the rest is the details adjustments which depend on the design – how you like the text to be placed.

/* reset all parent's  */
#site-title, #site-description, site-title a
{display:inline-block; clear:none; margin:0; padding:0;}

/* detail adjustments */
#site-title a
{color:steelblue; font-size:64px; line-height:1; margin-right:16px;}

/*  detail adjustments  */
#site-description
{color:skyblue; font-size:32px; line-height:1;}

/* adjust top padding here */
#branding hgroup
{padding-top:48px;}

Oh thank you so much! That worked wonderfully!

I wanted to align the text from the right, but the text align: right; didn’t work, so I added:

#site-title, #site-description, site-title a
{display:inline-block; clear:none; margin:0; padding:0; float: right;}

.

The new issue that arises is that the site title and description are now ‘glued’ together. I’ve been researching how to get a space between the words but haven’t found it so far. Any ideas?

Look up the CSS property margin. This level of CSS support can be provided through CSS-specific forums.

Thank you for that. Yes, I’m finding it difficult to figure out what the right code is to play with. Like, I don’t understand what the ‘margin-right:16px;’ is doing in the code above. To me, it looks like it’s not doing anything. I will look into the CSS specific forums for more info and post my solution here before closing.

It looks like the problem here is the “cascade” of CSS — later styles take precedence — and the last style for that element is this:

#site-description {
    color: #B9B9B9;
    font-family: Rockwell Extra Bold;
    font-size: 50px;
    line-height: 1;
    margin-right: 10px;
}

Adding a margin there works fine in Firebug.

Yess.. that worked. Thank you. I’ve been looking for the right CSS beginners course, but what I’ve found so far doesn’t really explain the basic concepts enough for me to really grasp it. I’ll keep looking though. And thank you all for your support in the meantime! Much appreciated.

@kubegusa

I noticed you switch Site Title and Tagline ?

If you love your client, don’t do that.

Site Title is used site wide for <title> tag. This is important, you can’t switch its place with Tagline. Use sitename for sitename and use tagline for tagline, it’s wrong to switch them for the sake of aligning text.

The last code I gave you work, to align the whole thing to the right just add float:right to the last selector.

/* adjust top padding here */
#branding hgroup
{padding-top:48px;float:right;}

So, same code from my previous but with last selector added float:right; that’s it.

and yes, Andrew is right, this belongs to CSS-specific forum, but well we’ve come this far now, so let’s just get it done (the right way) and move on.

Gosh thanks, that is a much better solution. This community is so great. Gratitude!