Possible to show different banner for phone and pc?

Store Design
1

Hi is there a way to show a different image for Mobile/PC when for the image banner. Im using a code as the image for the PC, but want to use a normal image for the phone.

https://premiumgaming-se.myshopify.com/

psw: prem

2

Hi,

You have to edit the whole section.

Before make any changes in your theme, please backup the theme.

  1. Duplicate the div class iactiveImg firsttype

  2. Add another class in the first div (original) class iactiveImg firsttype iactiveImg-PC

  3. Add another class in the second div (duplicated) class iactiveImg firsttype iactiveImg-Mobile

  4. Add the following css style in your theme.css (or theme.css.liquid)

@media screen and (min-width: 641px) {

.iactiveImg-PC {

display: block;

}

.iactiveImg-Mobile {

display: none;

}

}

@media screen and (max-width: 640px) {

.iactiveImg-PC {

display: none;

}

.iactiveImg-Mobile {

display: block;

}

}

  1. You have to edit & change the second div (duplicated) code to match the property value to section settings id

  2. Duplicate part of the schema for mobile section div and match the section.settings.id

  3. Customize the section in theme editor - select different image and change iactiveImgPoint locations for mobile