optimise the customized image for mobile

eli6303
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

KetanKumar
Shopify Partner
14125 1645 5069

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
eli6303
Tourist
3 0 1

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

0 Likes
KetanKumar
Shopify Partner
14125 1645 5069

@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
eli6303
Tourist
3 0 1

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

0 Likes
Lixon_Louis
Shopify Partner
1174 34 229

@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

 

Available for hiring. Reach me at lixon@ecommercestudio.in
0 Likes
berokarabay
Tourist
12 0 3

Hello @Lixon_Louis ,

This solution is exactly what I need, can you provide a guide for Broadcast theme?

Thanks for your help.

KetanKumar
Shopify Partner
14125 1645 5069

 

@berokarabay 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

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