optimise the customized image for mobile

[eli6303]

Hello, I am looking for help to optimize my slideshow banner for the mobile version. The banner is customized and the image itself has a text on it. So it looks perfect on a desktop version, but the mobile version gets cut. I saw that people were asking the same questions and they were advised to use code. I tried all that but it doesn't work for me. Can someone advise on what code to use? My theme is Debut. 

[KetanKumar]

Thanks @eli6303 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

[eli6303]

Here is the preview link: https://n3socrrfnvgtbxu1-39924039844.shopifypreview.com
Website is still not online

[KetanKumar]

@eli6303 

Thanks 

i have checked your issue on mobile and some other screen, not properly set your image so i have suggestion upload different size image on mobile view much better you and use.

i will do on customization  

[eli6303]

sorry, not sure if I understood that correctly. Can I not edit it with the code? 

[Lixon_Louis]

@eli6303  The section you are using is "Image with text overlay", not Slideshow. https://take.ms/NSVd5

But you can use the same logic on slideshow section too, but the code changes will be different.

Always backup your existing theme before making these changes. On my development store Debut theme version is 16.5.5 

1. Open sections/hero.liquid and create an option for mobile image. See  https://take.ms/WsigF

{
      "type": "image_picker",
      "id": "mobile_image",
      "label": "Mobile Image"
}

2.  Save the above changes and you will get an option "Mobile image" right after the Main image picker inside the customize theme menu. See https://take.ms/Cc46Z

3.  Pick a 9:16 image and save it. Now write some custom styles for toggling this image on mobile/desktop. Open theme.scss.liquid and paste this at the very bottom.

.mobile-only{ display: none}
.desktop-only{ display: block}

@media (max-width:768px){
  .mobile-only{ display: block}
  .desktop-only{ display: none}
}

4. As you are using "Full-width" layout for this section, the code responsible is from line 67. See https://take.ms/YONmR

Add a `desktop-only` class as per the screenshot. 

    <div class="hero desktop-only hero--{{ section.settings.hero_size }} hero-{{ section.id }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %} box ratio-container lazyload js"

5. Duplicate the entire div and place it under the current div element and give it a `mobile-only`  class.  Both should be above the <noscript> element.

See https://take.ms/1yGCy

    
    <div class="hero  mobile-only hero--{{ section.settings.hero_size }} hero-{{ section.id }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %} box ratio-container lazyload js"
         id="Hero-{{ section.id }}"
         data-layout="{{ section.settings.hero_layout }}"
         {%- if section.settings.mobile_image -%}
          {% unless section.settings.mobile_image.alt == blank %}
          role="img"
          aria-label="{{ section.settings.mobile_image.alt | escape }}"
          data-alt="{{ section.settings.image.alt | escape }}"
          {% endunless %}
         data-bg="{{ section.settings.mobile_image | img_url: '300x300' }}"
         data-bgset="{% include 'bgset', image: section.settings.mobile_image %}"
         data-sizes="auto"
         data-parent-fit="cover"
         style="background-position: {{ section.settings.alignment }}; background-image: url('{{ section.settings.mobile_image | img_url: '300x300' }});"
         {%- endif -%}>
    {%- if section.settings.image == blank -%}
      <div class="placeholder-background">
        {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
      </div>
    {%- endif -%}
      <div class="hero__inner">
        <div class="page-width text-center">
          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            {%- capture ariaLabel -%}
              {{- section.settings.button_label -}}
              {%- if section.settings.button_link.type == 'frontpage_link' -%}
                : {{ 'homepage.general.title' | t -}}
              {%- elsif section.settings.button_link.type == 'catalog_link' -%}
                : {{ 'collections.catalog.title' | t -}}
              {%- elsif section.settings.button_link.object.title -%}
                : {{ section.settings.button_link.object.title -}}
              {%- endif -%}
            {%- endcapture -%}

            <a href="{{ section.settings.button_link }}"
              class="btn hero__btn"
              aria-label="{{ ariaLabel }}">
              {{- section.settings.button_label | escape -}}
            </a>
          {%- endif -%}
        </div>
      </div>
    </div>

6. Save it and go to customize theme and check the changes. https://take.ms/jV322