Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make two elements line up perfectly?
    text
    copied!<p>I'm still trying to finish this theme I'm working on. Atm I'm trying to implement header support, and it's not going to well with my layout. Everything was fine until I added this line:</p> <pre><code>&lt;img src="&lt;?php header_image(); ?&gt;" /&gt; </code></pre> <p>So, header currently looks like this:</p> <pre><code>&lt;hgroup class="blog-header"&gt; &lt;img src="&lt;?php header_image(); ?&gt;" alt="" /&gt; &lt;h1 class="site-title"&gt;&lt;a href="&lt;?php echo esc_url( home_url( '/' ) ); ?&gt;" title="&lt;?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?&gt;" rel="home"&gt;&lt;?php bloginfo( 'name' ); ?&gt;&lt;/a&gt;&lt;/h1&gt; &lt;h2 class="site-description"&gt;&lt;?php bloginfo( 'description' ); ?&gt;&lt;/h2&gt; &lt;?php the_breadcrumb(); ?&gt; &lt;/hgroup&gt; </code></pre> <p>Here's the thing, this works fine when there's no header image, however when adding one, it messes up my styling for the site description - which bumps up a few pixels from where it was. The title and the description is supposed to be inline with each other, and I'm not sure how to fix this without one of the scenarios making it wrong..</p> <p>Here's my style for these:</p> <pre><code>.site-title { font-family: 'Bree Serif', Georgia, serif; font-weight: 700; font-style: uppercase; font-size: 30px; color: #fff; margin: 0 0 0 90px; padding: 60px 25px 60px 0; float: left; } .site-description { font-family: 'Source Sans Pro', sans-serif; font-size: 14px; font-weight: 400; color: #c9c9c9; padding: 68px 25px 60px 0; } </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload