Schro Schro - 20 days ago 7
CSS Question

Have different images appear depending on screen size

I came across this code: how to specify a different image in css depending if the user visits on a desktop or a mobile browser which suits my purposes quite well, but I cannot get it to work.

I want image to swap between loyalty-diagram.png and loyalty-diagram-mobile.png depending on the screen size.

I am wondering if something else in my code is stopping it from working.

Example of site http://codepen.io/Dingerzat/pen/MbwLBa

EDIT: Sorry about all the excess code everyone, I will make sure to edit my posts better in future.

JS

/*!
* classie v1.0.0
* class helper functions
* from bonzo https://github.com/ded/bonzo
* MIT license
*
* classie.has( elem, 'my-class' ) -> true/false
* classie.add( elem, 'my-new-class' )
* classie.remove( elem, 'my-unwanted-class' )
* classie.toggle( elem, 'my-class' )
*/

/*jshint browser: true, strict: true, undef: true, unused: true */
/*global define: false */

(function(window) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg(className) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ('classList' in document.documentElement) {
hasClass = function(elem, c) {
return elem.classList.contains(c);
};
addClass = function(elem, c) {
elem.classList.add(c);
};
removeClass = function(elem, c) {
elem.classList.remove(c);
};
} else {
hasClass = function(elem, c) {
return classReg(c).test(elem.className);
};
addClass = function(elem, c) {
if (!hasClass(elem, c)) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function(elem, c) {
elem.className = elem.className.replace(classReg(c), ' ');
};
}

function toggleClass(elem, c) {
var fn = hasClass(elem, c) ? removeClass : addClass;
fn(elem, c);
}

var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};

// transport
if (typeof define === 'function' && define.amd) {
// AMD
define(classie);
} else {
// browser global
window.classie = classie;
}

})(window);

$('.collapse').on('click', function(e) {
e.preventDefault();
$(this).toggleClass('active');
});


CSS

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}

@media (min-device-width:320px) {
img[data-src-960px] {
content: attr(data-src-960px, url);
}
}

@media (min-device-width:960px) {
img[data-src-1260px] {
content: attr(data-src-1260px, url);
}
}

body {
line-height: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
font-weight: normal;
}

ol,
ul {
list-style: none;
}

blockquote {
quotes: none;
}

blockquote:before,
blockquote:after {
content: '';
content: none;
}

del {
text-decoration: line-through;
}


/* tables still need 'cellspacing="0"' in the markup */

table {
border-collapse: collapse;
border-spacing: 0;
}

a img {
border: none;
}


/* =Scss Variables
-------------------------------------------------------------- */


/* =Global
-------------------------------------------------------------- */

*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
background-color: #3cb5f9;
color: #505050;
font-family: "Ubuntu", sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 1.8;
}


/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1;
font-weight: 300;
}

a {
text-decoration: none;
color: #3cb5f9;
}

a:hover {
color: #0793e2;
}


/* =Template
-------------------------------------------------------------- */

#wrapper {
width: 100%;
margin: 0 auto;
}

#main {
background-color: #ffffff;
padding-top: 150px;
}

.container {
width: 80%;
margin: 0 auto;
padding: 0 30px;
}

.containertwo {
width: 86%;
margin: 0 auto;
padding: 0 30px;
}

.containertwo h3 {
font-size: 30px;
text-align: center;
}

section {
padding: 60px 0;
}

section h1 {
font-weight: 700;
margin-bottom: 10px;
}

section p {
margin-bottom: 30px;
}

section p:last-child {
margin-bottom: 0;
}

section.color {
background-color: #d51c84;
color: white;
}


/* =Info Bar
-------------------------------------------------------------- */

#info-bar {
background-color: #000000;
}

#info-bar a {
color: white;
font-size: 14px;
text-transform: uppercase;
display: inline-block;
margin: 0;
padding: 10px;
}

#info-bar a:hover {
background-color: #0793e2;
}

#info-bar span.all-tutorials,
#info-bar span.back-to-tutorial {
display: block;
width: 50%;
}

#info-bar span.all-tutorials {
float: left;
text-align: left;
}

#info-bar span.back-to-tutorial {
float: right;
text-align: right;
}


/* =Header
-------------------------------------------------------------- */

#logo img {
height: 40%;
}

header {
width: 100%;
height: 150px;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: #000000;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
-ms-transition: height 0.3s;
-o-transition: height 0.3s;
transition: height 0.3s;
}

header h1#logo {
display: inline-block;
height: 150px;
line-height: 150px;
float: left;
font-family: "Oswald", sans-serif;
font-size: 60px;
color: white;
font-weight: 400;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}

header nav {
display: inline-block;
float: right;
}

header nav a {
line-height: 150px;
margin-left: 20px;
color: #ffffff;
font-weight: 700;
font-size: 18px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}

header nav a:hover {
color: white;
}

header.smaller {
height: 75px;
}

header.smaller h1#logo {
width: 150px;
height: 75px;
line-height: 75px;
font-size: 30px;
}

header.smaller nav a {
line-height: 75px;
}


/* =Footer
-------------------------------------------------------------- */

*,
*:before,
*:after {
box-sizing: border-box;
color: #242424;
padding: 20;
margin: 30;
}

html,
body {
background: rgb(0, 0, 0);
}

.content {
margin: auto;
margin-bottom: 350px;
/* Same height as footer */
}

.fixed_footer {
width: 100%;
height: 350px;
background: #000000;
position: fixed;
left: 0;
bottom: 0;
z-index: -100;
padding: 100px 5px;
}

.fixed_footer p {
color: #696969;
column-count: 2;
column-gap: 50px;
font-size: 1em;
font-weight: 300;
}


/* =Extras
-------------------------------------------------------------- */

.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}


/* =Media Queries
-------------------------------------------------------------- */

@media all and (max-width: 660px) {
/* =Header
-------------------------------------------------------------- */
header h1#logo {
display: block;
float: none;
margin: 0 auto;
height: 100px;
line-height: 100px;
text-align: center;
}
header nav {
display: block;
float: none;
height: 50px;
text-align: center;
margin: 0 auto;
}
header nav a {
line-height: 50px;
margin: 0 10px;
}
header.smaller {
height: 75px;
}
header.smaller h1#logo {
height: 40px;
line-height: 40px;
font-size: 30px;
}
header.smaller nav {
height: 35px;
}
header.smaller nav a {
line-height: 35px;
}
}

@media all and (max-width: 600px) {
.container {
width: 100%;
}
#info-bar a {
display: block;
}
#info-bar span.all-tutorials,
#info-bar span.back-to-tutorial {
width: 100%;
}
#info-bar span.all-tutorials,
#info-bar span.back-to-tutorial {
float: none;
text-align: center;
}
#info-bar span.all-tutorials {
border-bottom: solid 1px #0793e2;
}
}

html,
body {
margin: 0;
height: 100%;
}

section {
position: relative;
height: 100%;
background-attachment: fixed;
background-size: cover !important;
background-position: center;
background-blend-mode: screen;
/* &:nth-of-type(1) */
}

section h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
color: #fff;
width: 100%;
text-align: center;
}

section:nth-of-type(1) {
/* .paralax-1 */
}

section:nth-of-type(1) .paralax-1 {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
/* .new-paralax */
}

section:nth-of-type(1) .paralax-1 .new-paralax {
z-index: -100000;
transform: translateZ(-8000px) scale(0.4);
background-attachment: fixed;
background-size: cover !important;
background-position: center;
background-blend-mode: screen;
height: 100%;
width: 100%;
position: relative;
transform: scale(1.3);
background-color: #ffffff;
background-image: url("https://visualhunt.com/photos/xl/2/aerial-view-of-coffee-cup-on-wooden-table.jpg");
}

section:nth-of-type(2) {
height: 20em;
background-image: url("http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/iStock_000068237701_Full-edited.jpg");
}

section:nth-of-type(3) {
background-color: white;
}

section:nth-of-type(4) {
background-image: url("https://visualhunt.com/photos/xl/2/sport-gymnastics-frog-funny-fitness-fit-sporty-1.jpg");
}

section:nth-of-type(5) {
background-color: white;
}

.collapse {
background-color: rgba(255, 255, 255, 0);
border-bottom: 1px solid #eee;
cursor: pointer;
color: #fff;
padding: 10px;
margin: 0px;
max-height: 40px;
overflow: hidden;
transition: all 0.4s;
}

.collapse * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.collapse.active {
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
z-index: 200;
color: #444;
max-height: 3000px;
padding: 10px 20px;
margin: 10px -10px;
transition: all 0.2s, max-height 4.8s;
}

.collapse h2 {
font-size: 18px;
font-weight: bold;
line-height: 20px;
position: relative
}

.transparent {
background-color: rgba(255, 255, 255, 0) !important;
color: #000000 !important;
box-shadow: none !important;
margin: 0px !important;
padding: 20px !important
}

.collapse h2::after {
content: "+";
text-align: center;
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 30px;
line-height: 20px;
opacity: 0.5;
right: 0;
top: 0;
}

.collapse:hover h2::after {
opacity: 1
}

.collapse.active h2::after {
content: "-";
}


HTML

<!-- title and meta -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="" />
<title>Header Resize On Scroll with Animations</title>

<!-- css -->
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" />

<!-- js -->
<script src="js/classie.js"></script>
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();
</script>
</head>


<body>

<div id="wrapper">

<header>
<div class="container clearfix">
<h1 id="logo">
<img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/bilendi-logo-trans.png">
</h1>
<nav>
<a href="">Lorem</a>
<a href="">Ipsum</a>
<a href="">Dolor</a>
</nav>
</div>
</header>
<!-- /header -->
<div id="main">
<div id="content">
<main class="content" role="main">

<section>
<div class="container">
<div align="center"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon1.png" width="125"/><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon2.png" width="125"/><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon3.png" width="125"/>
<img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon4.png" width="125"/>
<img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon5.png" width="125"/>
<img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon6.png" width="125"/>
<img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon7.png" width="125"/></div><br>
<h2>Services for Market Research</h2><br>
<p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet
roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan
pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
<p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies
chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies
ice cream macaroon applicake.</p>
<div class="collapse transparent">
<h2>CRM & Loyalty consulting</h2>
<br>
<ul style="list-style-type:disc">
<li>Programme design</li>
<li>Process audits</li>
<li>Business plans</li>
<li>ROI Calculation</li>
<li>Deployment strategy</li>

</ul>
</div>
<div class="collapse transparent">
<h2>Big data & Insight</h2>
<br> <ul style="list-style-type:disc">
<li>Data mining</li>
<li>Segmentation</li>
<li>Customer insight</li>
<li>Database management</li>
<li>Predictive content</li>
<li>Database hygiene and appending</li>
</ul>
</div>
<div class="collapse transparent">
<h2>Omni-channel marketing</h2>
<br><ul style="list-style-type:disc">
<li>Marketing programmes</li>
<li>Programme launches</li>
<li>Activation and retention systems</li>
<li>Cross channel campaigns</li>
<li>Management and reporting</li>
</ul>
</div>
<div class="collapse transparent">
<h2>Rewards & Incentives</h2>
<br><ul style="list-style-type:disc">
<li>Reward sourcing & purchasing</li>
<li>Physical and digital rewards</li>
<li>Exclusive deals and discounts</li>
<li>Customised gift catalogues</li>
<li>Fulfilment, delivery and tracking</li>
</ul>
</div>
<div class="collapse transparent">
<h2>Customer service</h2>
<br><ul style="list-style-type:disc">
<li>Omni-channel contact centre</li>
<li>Distributor and network help desks</li>
<li>Welcome packs and documentation</li>
<li>Dispute resolution</li>
<li>FAQs and guidance</li>
<li>Self-help facilities</li>
</ul>
</div>
<div class="collapse transparent">
<h2>Bespoke programmes</h2>
<br><ul style="list-style-type:disc">
<li>Monetary or virtual currencies</li>
<li>Customer VIP clubs</li>
<li>Recognition programmes</li>
<li>Cashback programmes</li>
<li>Social loyalty</li>
<li>Sponsorship</li>
<li>Crowdfunding</li>
</ul>
</div>
<div class="collapse transparent">
<h2>Staff incentives</h2>
<br><ul style="list-style-type:disc">
<li>Sales force challenges</li>
<li>Network management</li>
<li>Adaptable to all types of organisation</li>
<li>Staff seniority tiers</li>
</ul>
</div>
<br>
<p>
<a href="http://www.bilendi.co.uk">&laquo; Want to know more?</a><br>
<a href="http://www.bilendi.co.uk">&laquo; Become a citizen!</a>
</p>
</div>
</section>
<section class="color">
<div class="container">
<h1>Cupcakes for the people!</h1>
</div>
</section>
<section class="color">
<div class="container">
<div align="middle"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyalty-diagram.png"
data-src-960px="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyalty-diagram-mobile.png"
data-src-1260px="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyalty-diagram.png"
alt="" width="100%" align="middle"></div><br>
<p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet
roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan
pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
<p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies
chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies
ice cream macaroon applicake.</p>
</div>
</section>
<section>
<div class="container">
<h1>Sugar rush, oh my...</h1>
<p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet
roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan
pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
<p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies
chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies
ice cream macaroon applicake.</p>
</div>
</section>
<section>
<div class="containertwo">
<h3>Enquire</h2>
<script type="text/javascript" src="https://bilendi.formstack.com/forms/js.php/bilendi_test_2"></script><noscript><a href="https://bilendi.formstack.com/forms/bilendi_test_2" title="Online Form">Online Form - BILENDI TEST 2</a></noscript><div style="text-align:right; font-size:x-small;"><a href="http://www.formstack.com?utm_source=jsembed&utm_medium=product&utm_campaign=product+branding&fa=h,2521222" title="HTML Form Builder">HTML Form Builder</a></div>
</div>
</section>
</main></div>
</div><!-- #main -->


<footer class="fixed_footer">
<div class=" container content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ducimus nemo quo totam neque quis soluta nisi obcaecati aliquam saepe dicta adipisci blanditiis quaerat earum laboriosam accusamus nesciunt! Saepe ex maxime enim asperiores nisi. Obcaecati nostrum nobis laudantium aliquam commodi veniam magni similique ullam quis pariatur voluptatem harum id error.</p>
</div>
</footer>



</div><!-- /#wrapper -->

</body>
</html>

Answer

Give the image a class in your HTML:

//desktop image with a class of loyalty-diagram  
<img src="" alt="" class="loyalty-diagram" />

//mobile image with a class of loyalty-diagram-mobile  
<img src="" alt="" class="loyalty-diagram-mobile" />

The easiest way to do this is with CSS & Media queries:

//desktop
/* Large devices (large desktops, 1200px and up) */
@media only screen and (min-width : 1200px) {

  .loyalty-diagram {
     display:block;
   }

   .loyalty-diagram-mobile {
     display: none;
   }

}

//mobile
/* Extra small devices (phones, less than 768px) */
@media (max-width:767px) {

   .loyalty-diagram {
     display:none;
   }

   .loyalty-diagram-mobile {
     display: block;
   }

}

This is simply hiding .loyalty-diagram.png image on mobile and displaying it on desktop and vice versa.

Comments