Select slide height in slideshow independently on mobile and desktop site

Store Design
1

Hi there,

i am using dawn theme version 15.0.2. My store url is vulph.com.

Currently when i choose medium slide height for desktop, it changes the height to medium on mobile as well. I need help to select slide height independently on mobile and desktop.

Thanks

2

Hi @alihk ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_0-1722928372789.png
BSSCommerceB2B_0-1722928372789.png400×195 26.3 KB

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

/* CSS for desktop view */
@media (min-width: 750px) {
  .slideshow.banner.banner--large.grid.grid--1-col.slider.slider--everywhere.scroll-trigger.animate--fade-in {
    height: 500px;
  }
}

/* CSS for mobile view */
@media (max-width: 749px) {
  .slideshow.banner.banner--large.grid.grid--1-col.slider.slider--everywhere.scroll-trigger.animate--fade-in {
    height: 300px;
  }
}

IN this step, you can change the heigt as you want to in mobile view or destop view with @media query.

Step 3: Save your code and reload this page.

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

3

‘‘you can change the height as you want to in mobile view or desktop view with @media query’’

Hi, I am not that good in it. Could you please little explain how to change height with @media query?

thanks