Slideshow images too big for mobile (Porto Demo10 Theme)

Store Design
1

Hello, our current slideshow images are rendering way too large for mobile visitors - looks fine on desktop however.

Is there a way to fix this for mobile users? web url: www.thewitchesalmanac.com

Thank you very much!

2

Hi @cmelucci

I see that your slideshow image ratio is not good for mobile, I think you should you the image with the height bigger. To make it displays well on mobile, please add the custom CSS below to your theme, it will make the slideshow height depends on your image aspect ratio, see my screenshot: https://take.ms/7vM0l

@media (max-width: 767px) {
  .slideshow-section .slideshow .item {
    padding-top: 0 !important;
    min-height: unset !important;
  }
}
3

Hi @James_FoxEcom !

Thank you for your reply. What file should I add your code to?

Thanks,

4

Hi @cmelucci

Please open the file: layout/theme.liquid then add the code below to the right before closing tag

Let me know the result

5

Hi @James_FoxEcom

I added your code and checked on mobile. It looks like the slideshow is no longer rendering at all. Code snippet below:

 
  {% include 'translator' %}
6

Please use this CSS
7

This worked! Thank you very much :slightly_smiling_face:

8

You are welcome, don’t hesitate to let me know if you have any questions