How can I change banner images between web and mobile views?

Technical Q&A
1

Hello everyone,
I’m beginner in Shopify and I try to learn myself coding :slightly_smiling_face:
So I want to see banerimage on web & banermobile on mobile. I can’t fix it.
This is the template code:
(I add myself blocks banermobile class=“mobile” and mobile.jpg?v=1619698723)

Thank you for your help
Alexandrek


    

      
       
        {% if section.blocks.size > 0 %}
        {% for block in section.blocks %}
        {% if block.type == "slideshow" %}
        

          

            

              {% if block.settings.block_banerimage != blank %}
                
                

           
          
               

              {% else %}
              
              {% endif %}
            


.section-slideshow-v3 {
  .slick-dots{
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: unset;
    li{
      margin: 0 3px;
      button{
        &:before{
          opacity: 0;
        }
        font-size: unset;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 12px;
        height: 12px;
        border: 2px solid #fff;
        border-radius: 50%;
      }
    }
    .slick-active{
      button{
        background-color: #fff;
      }
    }
    @media only screen and (max-width: 576px) {
      bottom: 20px;
    }
    @media only screen and (min-width: 576px) {
      bottom: 30px;
    }
  }  
  .slick-dotted.slick-slider {
    margin-bottom: 0px;
    padding: 0;
  } 
  .info-sideh3 {
    position:relative;
    .picture-slideshow {
      overflow: hidden;
      img {
        width: 100%;
        transform: scale(1.1);
        transition: all 8s ease;
        @media only screen and (max-width: 576px) {
          min-height: 400px;
          object-fit: cover;
        }
      }
    }
2

@alexandrek

here is my code that work with all themes
https://community.shopify.com/c/Shopify-Design/how-to-create-top-banner-section-for-section-themes/m-p/1146889#M293327

3

Thank you for your answer, but I’m not looking to create a new section. I already organize the schema.

I want to use an image for web screen and use another image for mobile screen. So hide one when the other is used.
How can I do that ? Do I have to play with the alt, the class?

4

@alexandrek

Using the element will be the easiest way to achieve what you are after, but kindly do bear in mind that some HTML knowledge will be necessary to properly implement it.

Kind regards,
Diego

5

Thank you, I will try this one and let you know.

6

@diego_ezfy

It’s working ! Thanks

That’s the code I used