Databases
StackOverflow2013
Postsdbo
POHTML5 semantic vs styling issue
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML5 semantic vs styling issue
    text
    copied!<p>I'm trying to build a Wordpress theme, using media queries for responsive layout. I have some issues around getting the correct layout whilst maintaining some semantic mark up.</p> <p>Basically, for the post date in pages less than, say, 764 pixels wide, I want to have the date, bullet, and post category displaying inline; if the page is above this size, then the post date should display as a column (entry-date), alongside the main post column (main-column). </p> <p>I think I've managed to get there, but just wondered if this html code was valid, as I've tried to keep header and footer sections within the post to make it make sense semantically.</p> <p>Does anyone have any feedback?</p> <p>Thanks, John</p> <pre><code>&lt;article class="post"&gt; &lt;div class="entry-date"&gt; &lt;span&gt;&lt;span&gt;30&lt;sup&gt;th&lt;/sup&gt;&lt;/span&gt; Sep 2013&lt;/span&gt; &lt;/div&gt; &lt;div class="main-column"&gt; &lt;span class="bullet"&gt;&amp;#x25CF;&lt;/span&gt; &lt;header class="entry-header"&gt; &lt;span class="entry-category"&gt;&lt;a href="#"&gt;Cars&lt;/span&gt; &lt;h1 class="entry-title"&gt;&lt;a href="#" title="" rel="bookmark"&gt;A new car from Ferrari&lt;/a&gt;&lt;/h1&gt; &lt;span class="entry-authors vcard"&gt;by &lt;a href="#" title="" rel="me"&gt;John Smith&lt;/a&gt; &lt;/span&gt; &lt;div class="featured-img"&gt;&lt;img src="img/ferrari.jpg" class="" alt=""&gt;&lt;/div&gt; &lt;/header&gt;&lt;!-- .entry-header --&gt; &lt;div class="entry-content"&gt; &lt;p&gt;Ferrari have released a great new car, which is very fast.&lt;/p&gt; &lt;span class="continue-reading"&gt;&lt;a href="#"&gt;Continue reading&lt;/a&gt;&lt;/span&gt; &lt;/div&gt;&lt;!-- .entry-content --&gt; &lt;footer class="entry-meta"&gt; &lt;span class="entry-tags"&gt;&lt;a href='#'&gt;Sports cars&lt;/a&gt;&lt;/span&gt; &lt;/footer&gt;&lt;!-- .entry-meta --&gt; &lt;/div&gt; &lt;/article&gt;&lt;!-- #post-1234 --&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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