HTML Inline Block Container -> responsive to slider

I have written a little HTML Code which is displaying 3 Images in a row with a underneath Header. I want to make it responsive, so it will show the pictues on mobile as a slider, which is scrolling automatically (if possible) between the images. I tried a lot of things but I didn´t succeed, does someone have an idea how to make it responsive? If it is not possible with a slider, maybe then all 3 pictures on mobile as well in a row?

This is my code:

<meta charset="utf-8">
<title></title>
<style>
   div.container {
   display:inline-block;
   padding: 30px;
   }
</style>
<div class="container">
   <img src="https://cdn.shopify.com/s/files/1/0431/9559/6957/files/recycle_-_Kopie_-_Kopie_400x.png?v=1596041138" height="200" width="150">
   <h2 class="SectionHeader__Heading Heading u-h1" data-theme-editor-setting="section.1595944684240.title/escape">Monatliches Abonnement</h2>
</div>
<div class="container">
   <img class="middle-img" src="https://cdn.shopify.com/s/files/1/0431/9559/6957/files/euro_1_400x.png?v=1596041395" height="200" width="150">
   <h2 class="SectionHeader__Heading Heading u-h1" data-theme-editor-setting="section.1595944684240.title/escape">Kauf auf Rechnung</h2>
</div>
<div class="container">
   <img src="https://cdn.shopify.com/s/files/1/0431/9559/6957/files/lkw2_400x.png?v=1596041406" height="200" width="210">
   <h2 class="SectionHeader__Heading Heading u-h1" data-theme-editor-setting="section.1595944684240.title/escape">Lieferung vor Ihre Tür</h2>
</div>

2 answers

  • answered 2020-07-29 17:31 shubh1834

    You can try the attached code, it will surely solve your issue but if it doesn't let me know in the comments, I will try my best to assist you.

    In the answer I have added position: relative; to make it adjust itself on screens with less resolution.

    I have a suggestion for you that use Viewport Units like vw for width and vh for height instead of px or % because it will help you make your webpage/website responsive. For your better understanding I have added an example in padding by changing padding: 30px; to padding: 2.196vw;.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        div.container {
            display:inline-block;
            position: relative;
            padding: 2.196vw;
        }
    </style>
    </head>
    <body>
    <div class="container">
       <img src="https://cdn.shopify.com/s/files/1/0431/9559/6957/files/recycle_-_Kopie_-_Kopie_400x.png?v=1596041138" height="200" width="150">
       <h2 class="SectionHeader__Heading Heading u-h1" data-theme-editor-setting="section.1595944684240.title/escape">Monatliches Abonnement</h2>
    </div>
    <div class="container">
       <img class="middle-img" src="https://cdn.shopify.com/s/files/1/0431/9559/6957/files/euro_1_400x.png?v=1596041395" height="200" width="150">
       <h2 class="SectionHeader__Heading Heading u-h1" data-theme-editor-setting="section.1595944684240.title/escape">Kauf auf Rechnung</h2>
    </div>
    <div class="container">
       <img src="https://cdn.shopify.com/s/files/1/0431/9559/6957/files/lkw2_400x.png?v=1596041406" height="200" width="210">
       <h2 class="SectionHeader__Heading Heading u-h1" data-theme-editor-setting="section.1595944684240.title/escape">Lieferung vor Ihre Tür</h2>
    </div>
    </body>
    </html>

  • answered 2020-07-29 17:34 Parita Patel

    Add a wrapper div with class "images-wrapper" outside the three containers

    Modify your css as below

    .images-wrapper {
      display: block;
      white-space: nowrap;
    }
    .container {
      display: inline-block;
      padding: 30px;
      overflow-x: scroll;
    }