Shopify Design

cmelucci · ‎11-29-2022

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!

James_FoxEcom · ‎11-29-2022

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>

Foxify Builder - A Conversion-Focused Storefront Builder for Growing SMBs

Visit our website to see more products from FoxEcom.

- Was my reply helpful? Click Like to let me know!

- Was your question answered? Mark it as an Accepted Solution

Don't hesitate to let me know if you have further question

View solution in original post

James_FoxEcom · ‎11-29-2022

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;
  }
}

Foxify Builder - A Conversion-Focused Storefront Builder for Growing SMBs

Visit our website to see more products from FoxEcom.

- Was my reply helpful? Click Like to let me know!

- Was your question answered? Mark it as an Accepted Solution

Don't hesitate to let me know if you have further question

cmelucci · ‎11-29-2022

Hi @James_FoxEcom !

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

Thanks,

James_FoxEcom · ‎11-29-2022

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

Foxify Builder - A Conversion-Focused Storefront Builder for Growing SMBs

Visit our website to see more products from FoxEcom.

- Was my reply helpful? Click Like to let me know!

- Was your question answered? Mark it as an Accepted Solution

Don't hesitate to let me know if you have further question

cmelucci · ‎11-29-2022

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 · ‎11-29-2022

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>

Foxify Builder - A Conversion-Focused Storefront Builder for Growing SMBs

Visit our website to see more products from FoxEcom.

- Was my reply helpful? Click Like to let me know!

- Was your question answered? Mark it as an Accepted Solution

Don't hesitate to let me know if you have further question

cmelucci · ‎11-29-2022

This worked! Thank you very much 🙂

James_FoxEcom · ‎11-29-2022

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

Foxify Builder - A Conversion-Focused Storefront Builder for Growing SMBs

Visit our website to see more products from FoxEcom.

- Was my reply helpful? Click Like to let me know!

- Was your question answered? Mark it as an Accepted Solution

Don't hesitate to let me know if you have further question

Shopify Design

Slideshow images too big for mobile (Porto Demo10 Theme)

Slideshow images too big for mobile (Porto Demo10 Theme)

Re: Slideshow images too big for mobile (Porto Demo10 Theme)

Re: Slideshow images too big for mobile (Porto Demo10 Theme)

Re: Slideshow images too big for mobile (Porto Demo10 Theme)

Re: Slideshow images too big for mobile (Porto Demo10 Theme)

Re: Slideshow images too big for mobile (Porto Demo10 Theme)

Re: Slideshow images too big for mobile (Porto Demo10 Theme)

Re: Slideshow images too big for mobile (Porto Demo10 Theme)

Re: Slideshow images too big for mobile (Porto Demo10 Theme)

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links