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.
Thanks @eli6303
Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.
Here is the preview link: https://n3socrrfnvgtbxu1-39924039844.shopifypreview.com
Website is still not online
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 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.
<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
Hello @Lixon_Louis ,
This solution is exactly what I need, can you provide a guide for Broadcast theme?
Thanks for your help.
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.
User | Count |
---|---|
555 | |
213 | |
129 | |
80 | |
44 |