Reply To: 2 options for responsive images in repeat field

• markbloomfield

• July 17, 2017 at 5:23 pm

Something like:

<div class="show-on-desktop hide">
  Visible on Desktop
</div>

<div class="show-on-mobile hide">
  Visible on Mobile
</div>

and then your JS would be:

var windowWidth = $(window).width();
var $desktopVisible = $('.show-on-desktop');
var $mobileVisible = $('.show-on-mobile');

if (windowWidth <= 640) {
  $desktopVisible.addClass('hide');
  $mobileVisible.removeClass('hide');
} else {
  $desktopVisible.removeClass('hide');
  $mobileVisible.addClass('hide');
}

CSS:

.hide {display:none;}

Like so?