Mobile First and Inline Styles Problem

In this example below you will see how to do a Mobile First and Inline Styles Problem with some HTML / CSS and Javascript

My approach on a site I'm currently working is to use min-width media queries to build up the page as the screen gets bigger. Background images of components are content managed so they are set using inline styles. However the designs dictate that the background images don't appear on small screens.

Thumbnail
This awesome code was written by duncanmcdougall, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright duncanmcdougall ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Mobile First and Inline Styles Problem</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {  background: url('http://s15.postimage.org/veanrmv0r/purty_wood_3.png');  padding: 20px;}

.component {
  color: white;
  text-shadow: 0 1px 3px black;
}

@media screen and (min-width: 768px) {
 .component {
    background: center center no-repeat;
    background-size: cover;
    width: 200px;
    height: 200px;
 }
}
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="component" style="background-image: url('http://lorempixel.com/500/500/sports/')">
  Small screens shouldn't see background image
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/duncanmcdougall/mobile-first-and-inline-styles-problem-GAuzb */
body {  background: url('http://s15.postimage.org/veanrmv0r/purty_wood_3.png');  padding: 20px;}

.component {
  color: white;
  text-shadow: 0 1px 3px black;
}

@media screen and (min-width: 768px) {
 .component {
    background: center center no-repeat;
    background-size: cover;
    width: 200px;
    height: 200px;
 }
}

Comments