Does displaying none on duplicate content affect SEO/Semantics?

Question

Does Display: none on duplicate content affect SEO/Semantics?

Suppose you're building a mobile-first, responsive site. At smaller breakpoints, you've opted to show your page's heading tagline (<h1>) in the main hero banner. However, later, you'd like to display a company logo in that same spot, and display your tagline in a sub banner. For example:

<!-- Assuming following markup -->
<header class="hero-banner">
    <h1 class="hide-on-lg">Company Tagline</h1>
    <img src="..." class="show-on-lg" />
</header>
<div class="subhead-banner">
    <h1 class="show-on-lg">Company Tagline</h1>
</div>

...with the following CSS:

.hide-on-lg {
    display: block;
}
.show-on-lg {
    display: none;
}
@media (min-width: 1200px) {
    .show-on-lg {
        display: block;
    }
    .hide-on-lg {
        display: none;
    }
}

The semantic rule is that you should never have more than a single h1 on a page, so my question is this:

Does having that duplicate content affect SEO, or violate semantics, if only one variation is ever actually visible?

Answer 1

Google crawls CSS ‘display:none’ Content, so it is duplicate content. More info here http://seoshrugged.com/2014/07/13/does-google-crawl-css-displaynone-content/

Answer 2

Yes, apparently it will adversely affect SEO; Google does take into account CSS being used to render a page (black text on a black background, etc..). Additionally, it is indicated there should only be one H1 tag per page, etc... A better way to still have relative 'dynamic' functionality in your case might be to use a combination of your media queries (bootstrap?) and jquery and change the style and position of it dynamically without necessarily calling them both an H1.