Switching images when in mobile

[JDRDigital]

Hi there,

I’ve seen a good example of code that switches the images when the screen width goes past a certain size. Can i do something like that in Pro?

I’ve attached the code and the example website below.

[ruenel]

Hello @JDRDigital,

Thanks for writing in!

If you want to switch background images in smaller screens, you will use something like this:

element.style {
  background-image: url(IMAGEURL-1);
}

@media(max-width: 979px){
  element.style {
    background-image: url(IMAGEURL-2);
  }
}

And by the way, you code is invalid. The correct one should be like this:

element.style {
  background-image: url(IMAGEURL);
}

@media only screen and (max-width: 1650px){
  /* this css @media block code will only take effect when the screen size is greated than 
    1650 pixels */

  .section.presentation.make-more-money .illustration {
    width: 680px;
  }
  .section.presentation.make-more-money .illustration {
    right: 0;
    width: 750px;
  }
  .section.presentation .illustration {
    background-repeat: no-repeat;
    background-position: right 0;
    background-size: contain;
    width: 600px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
  }
}

Hope this helps. Please let us know how it goes.