0

I am not 100% clear on how to implement images for mobile only view that are different than the ones I have for desktop view

So for example, if I have this image for desktop:

&.card {
        .card-image {
          @include background-helper('gallery/old-pic.jpg', center, contain, no-repeat);
        }
      }

which comes from the mixin file where I have this code:

@mixin background-helper($image: false, $position: center, $size: contain, $repeat: no-repeat){
  @if $image {
    background-image: asset-url($image);
    background-repeat: $repeat;
    background-size: $size;
    background-position: $position;
  }
}

Not sure what logic to add that would tell my application to render something other than old-pic.jpg if the user is viewing it on a mobile phone.

1 Answers1

0

It seems you have to use media queries. for example:

$break-small: 320px;
$break-large: 1200px;

.card-image {
  @media screen and (max-width: $break-small) {
    @include background-helper('gallery/mobile-pic.jpg', center, contain, no-repeat);
  }
  @media screen and (min-width: $break-large) {
    @include background-helper('gallery/old-pic.jpg', center, contain, no-repeat);
  }
}
Mahdi Aryayi
  • 1,090
  • 7
  • 13
  • not sure if your fix works. I tried making them all the same mobile image for the different card selectors, but this did not render. However, when I give it the wrong path for the mobile assets, it does break. I do not see different dimensions in Chrome devtools console. –  Aug 01 '18 at 17:24