optimise the customized image for mobile

Highlighted
Tourist
3 0 1

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. 
Screen Shot 2020-06-04 at 12.43.35.png

1 Like
Highlighted
Shopify Partner
4885 725 1571

Thanks @eli6303 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
3 0 1

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

0 Likes
Highlighted
Shopify Partner
4885 725 1571

@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  

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
3 0 1

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

0 Likes
Shopify Partner
1161 31 204

@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/jV3222020-06-07-16-31-18.gif

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
- Available for hiring. lixon@ecommercestudio.in
0 Likes