add one image to slideshow to be visible in mobile view only

Site URL: https://duelle.studio/about

Hello everyone,

I have this code in my CSS as I want to have a specific image for mobile portrait view only, different from what I have in mobile landscape or screen mode.

However to this code I would like to add something that makes me having 2 images alternated instead of only one.

Either as in a slideshow of 5 s each, or click to change.

This only in mobile portrait mode, without affecting any of the other modes.

Thank you in advance to anyone who can help me out.

 @media screen and (orientation:portrait)
  { 
#collection-61dc4529fdc5342366fa9b80
    .gallery
   { background-image: url("https://static1.squarespace.com/static/5ff072b1fbf14e2399f4cb8f/t/610c24c8d375ab3084be62f6/1628185800802/Duelle+text+%2B+circle+mobile+version.png") !important;
  background-repeat: no-repeat;
    background-size: 90% ;
    background-position: center;
       img {
         visibility: hidden !important;}
     
}   }

Can you share link to page where you have problem?

On 1/26/2022 at 10:35 AM, tuanphan said:

Can you share link to page where you have problem?

Hi , yes the link is above the question text.

but here it again Site URL: https://duelle.studio/about

the page is public. 

More than a problem, it is more that I would like to add something to it. 

Instead of one image only when viewing in mobile, a possibility to have a second image coming up when clicking or after a 5s time frame.

thank you.