How to get (h1 + (span)) + (h2) into (span) + (h1) + (h2) …?

Question

Sorry for the cryptic title of this post, but ... on this responsive webpage the HTML of the header is:

<!-- header -->
<header>
<hgroup>
<!-- space (&nbsp;) in <span> is necessary to show background-image (logo)! -->
<h1><txp:site_name /><span>&nbsp;</span></h1>
<h2><txp:site_slogan /></h2>
</hgroup>
</header>

With text-align:center; on header (and some other CSS) I get what I want ... on wide media that is. On small devices it becomes very messy (off course).

My question: is it possible with above HTML to stack (center) everything in this order:

| logo |
|  h1  |
|  h2  |

... so that it can fit nicely on smaller screens?

Answer 1

You could achieve this using float property, text-align and clear getting little help from pseudo-element :before

http://codepen.io/gcyrillus/pen/rfElA <h1> text is wrap in a container too , here a <b> for the purpose of the show. it is the only way to clear down the text.

<span> , should be an <img> for the logo with a nice alt="trademark logo" , so it exists :) .

Answer 2

Try using the flexbox model

something like:

    display: flex;        /* Lay out each item using flex layout */
    flex-flow: column;    /* Lay out item's contents vertically  */

This generator may help