Horizontal Slideshow

Question

Hy Guys, i'm here to ask you help beacuse i can do an horizontal slideshow for mobile device.

This is my css code:

#offers {
        background-color: #ebeff2;
        padding-bottom:20px;
    }
    .slideshow {
        z-index: 1000;
        max-width: 370px;
    }
    .slideshow ul {
        margin:0px;
        padding:0px;
        list-style: none;

        width: 2000px;
        overflow-x: visible;
        z-index: 5;
    }
    .slideshow ul li {
        padding:10px;
        background-color:#fff;
        position: relative;
        text-align: center;

        float:left;
    }
    .slideshow ul li img.background{
        width: 326px;
        height: 244px;
    }

    .slideshow ul li .name {
        position: absolute;
        top:40px;
        background-color: #fff;
        width: 95%;
    }

    .slideshow ul li .name img {
        height: 62px;
    }

    .slideshow ul li .price {
        border-radius: 100%;
        background-color: #fff;
        height: 80px;
        width: 80px;
        position: absolute;
        bottom: 60px;
        left: 38%;
        font-weight: 900;
        font-size: 25px;
        line-height: 80px;
        color: #ff6d06;
    }

And here html code:

<div class="row" id="offers">
        <div class="col-md-12">
            <h2>Alcune Offerte Attive</h2>
        </div>
        <div class="col-md-12">
           <div class="slideshow">
               <ul>
                   <li>
                       <div class="">
                           <img src="./images/img.jpg" class="img-fluid background">
                           <div class="name">
                               <img src="./images/logo.png" class="img-fluid">
                           </div>
                           <div class="price">
                                10 &euro;
                           </div>
                       </div>
                   </li>
                   <li>
                       <div class="">
                           <img src="./images/img.jpg" class="img-fluid background">
                           <div class="name">
                               <img src="./images/logo.png" class="img-fluid">
                           </div>
                           <div class="price">
                               10 &euro;
                           </div>
                       </div>
                   </li>
                   <li>
                       <div class="">
                           <img src="./images/img.jpg" class="img-fluid background">
                           <div class="name">
                               <img src="./images/logo.png" class="img-fluid">
                           </div>
                           <div class="price">
                               10 &euro;
                           </div>
                       </div>
                   </li>
               </ul>
           </div>
        </div>
    </div>

So, actually the result is very simple:

But i'm looking to have a "fixed width slide" as the mobile screen that i can scrool. Actually the small boxes are larger than mobile screen size, i already tryed to add fixed with to slideshow class and i have added overflow-x scroll but seems not working and i do not know why.

Thanks in advance for you help.

UPDATE

My request is confused so at this link you can see what i'm looking for: link

Answer 1

Well, firstly, your question is confusing, have you heard of css media queries simple. Let me show you, I will cut from your code and all external styling rules, inline style is not so advisable but I will show you also, how to do it with css media query. You want to achieve image height control. CODE

        <div class="slideshow">
           <ul>
               <li>
                   <div class="mobile1">
                       <img src="./images/img.jpg" class="img-fluid background  simple">
                       <div class="name">
                           <img src="./images/logo.png" class="img-fluid">
                       </div>
                       <div class="price">
                            10 &euro;
                       </div>
                   </div>
               </li>
               <li>
                   <div class="mobile2">
                       <img src="./images/img.jpg" class="img-fluid background simple">
                       <div class="name">
                           <img src="./images/logo.png" class="img-fluid">
                       </div>
                       <div class="price">
                           10 &euro;
                       </div>
                   </div>
               </li>
               <li>
                   <div class="mobile3">
                       <img src="./images/img.jpg" class="img-fluid background simple">
                       <div class="name">
                           <img src="./images/logo.png" class="img-fluid">
                       </div>
                       <div class="price">
                      10 &euro;
                       </div>
                   </div>
               </li>
           </ul>
       </div>

If it doesn't work, call my attention.

       <style> 
     @media screen and (max-width: 820px) {  //MEDIA QUERIES, RESEARCH MORE ON THEM. WHAT I AM SAYING HERE IS, IF SCREEN IS LESS THAN 820px a desktop size apply that media screen css.
       .mobile1{
      height:300px; //adjust this to your taste
      width:100%; //to make image fill screen horizontally
      }

     .mobile2{
       height:300px; //adjust this to your taste
      width:100%; //to make image fill screen horizontally
      }


      .mobile3{
       height:300px; //adjust this to your taste
      width:100%; //to make image fill screen horizontally
      }


      .simple{
      height:100%;
      width:100%;
      }
      }
      </style>