Separate logo banners for mobile & desktop

[ccm]

I would like to show a different banner for phones/tablets and desktop. banner-4 on desktop and banner-4-small on phone and tablet. My current code will show both banners on all devices at all times. on desktop, the normal banner is above the phone banner. On phone and tablet, it shows both banners but the normal one is stretched and the phone banner and content below it is pushed to the left.

The inspect element tab in chrome shows the css “display none” for the phone banner is crossed out. If I eliminate line 2 of the attached css the mobile banner is hidden from the desktop. Seems to be a simple mistake somewhere but I am not seeing it

here is a link to the partial code
http://codepen.io/captchrism/pen/EyXaQK

[Atelierbram]

Specificity issue: #logo img is too strong with the id: it overrides the ones in the media-queries. When you would change this to an attribute selector than it will work.

[div id="logo"] img {
  display: block;
  margin: 0 auto;
}

[ccm]

When I do that, it no longer displays the mobile banner on the desktop but it shifts the banner over to the left.

[Atelierbram]

Oops, syntax error, should be:

[id="logo"] img {
  display: block;
  margin: 0 auto;
}

[Author]

Posts