How to adjust slideshow height for mobile and desktop views?

[sondreskskfsghj]

hey, I want to change the size of my slideshow, so that it looks like this on mobile:

Instead of this:

and on desktop I want it to look like this

instead of this:

I managed to change it on mobile by editing padding-bottom to 385 px for .hero-natural-mobile--template--17760203178306__6d58c228-e01a-45ae-ac59-d52f696909a3

but i don't know hot to implement it in the code

store link:  https://8c2dd1-3.myshopify.com/ 

[GemPages]

Hello @sondreskskfsghj ,

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

2. Open your theme.liquid file, paste the below code before </body>

    <style>
      @media (min-width: 768px ) {
        .shopify-section.index-section--hero [data-section-type="slideshow-section"] .flickity-slider .parallax-container {
            top: -10% !important;
        }
      }
       @media (min-width: 768px ) {
        .shopify-section.index-section--hero [data-section-type="slideshow-section"] .hero-natural-mobile--template--17760203178306__6d58c228-e01a-45ae-ac59-d52f696909a3 {
            height: 0;
            padding-bottom: 100.9267935578331%;
        }
      }
    </style>

I hope the above is useful to you.

Kind & Best regards, 
GemPages Support Team