Solved

Slideshow images too big for mobile (Porto Demo10 Theme)

cmelucci
Tourist
11 0 2

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!

Accepted Solution (1)
James_FoxEcom
Shopify Partner
75 14 18

This is an accepted solution.

Please use this CSS

 

<style>
  @media (max-width: 767px) {
    .slideshow-section .slideshow .item {
      padding-top: 0 !important;
      min-height: unset !important;
    }
    .slideshow-section .slideshow .item img {
      position: static;
    }
  }
</style>
Find my answer helpful? Give it a like 🙂
Try Foxify now - #1 Conversion-focused page builder.
Proudly made by FoxEcom.com - Smart & hyperefficient front-end solutions for SMBs. Impact sales, costs, and revenue all at once.

View solution in original post

Replies 7 (7)

James_FoxEcom
Shopify Partner
75 14 18

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;
  }
}
Find my answer helpful? Give it a like 🙂
Try Foxify now - #1 Conversion-focused page builder.
Proudly made by FoxEcom.com - Smart & hyperefficient front-end solutions for SMBs. Impact sales, costs, and revenue all at once.
cmelucci
Tourist
11 0 2

Hi @James_FoxEcom !

 

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

 

Thanks,

James_FoxEcom
Shopify Partner
75 14 18

Hi @cmelucci 

 

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

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

 Let me know the result

Find my answer helpful? Give it a like 🙂
Try Foxify now - #1 Conversion-focused page builder.
Proudly made by FoxEcom.com - Smart & hyperefficient front-end solutions for SMBs. Impact sales, costs, and revenue all at once.
cmelucci
Tourist
11 0 2

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:

 </script> 
  {% include 'translator' %}
  <style>
    {{settings.custom_style_1}}
    {{settings.custom_style_2}}
  </style>
<style>
  @media (max-width: 767px) {
    .slideshow-section .slideshow .item {
      padding-top: 0 !important;
      min-height: unset !important;
    }
  }
</style>
</head>
<body id="{{ page_title | handle }}" class="{% if settings.new_style_css == 'yes' %}site-new-style{% endif %}{% if settings.header_fullwidth != blank %} header-full-width{% endif %}{% if settings.background_color == 'dark' %} dark{% endif %}{% if settings.layout == '1024px' %} layout-1024{% endif %}{% if settings.layout == '1280px' %} layout-1280{% endif %}{% if settings.layout == 'full_width' %} full-width{% endif %}{% if customer %} customer-logged-in{% endif %} template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}{% if settings.boxed == 'boxed' %} boxed{% endif %}{% if settings.collection_flex_grid != blank %} collection-flex-grid{% endif %}{% if settings.header_sticky_enable == 'enable' %} enable-sticky-header{% endif %}">
  <!-- begin site-header -->
  <div class="wrapper">
James_FoxEcom
Shopify Partner
75 14 18

This is an accepted solution.

Please use this CSS

 

<style>
  @media (max-width: 767px) {
    .slideshow-section .slideshow .item {
      padding-top: 0 !important;
      min-height: unset !important;
    }
    .slideshow-section .slideshow .item img {
      position: static;
    }
  }
</style>
Find my answer helpful? Give it a like 🙂
Try Foxify now - #1 Conversion-focused page builder.
Proudly made by FoxEcom.com - Smart & hyperefficient front-end solutions for SMBs. Impact sales, costs, and revenue all at once.
cmelucci
Tourist
11 0 2

This worked! Thank you very much 🙂

James_FoxEcom
Shopify Partner
75 14 18

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

Find my answer helpful? Give it a like 🙂
Try Foxify now - #1 Conversion-focused page builder.
Proudly made by FoxEcom.com - Smart & hyperefficient front-end solutions for SMBs. Impact sales, costs, and revenue all at once.