Debut theme, 1.01
On homepage, we have a 3-column Text and image section, arranged side by side, both for desktop and mobile view as well.
I want to have separate images for this section for mobile and desktop.
How can this be done? What code to be added in which file and exact location.
Any help is greatly appreciated.
Hi @CW5
You can create 2 separate sections, one for desktop and one for mobile, and then add CSS code to hide section for each device.
Thanks. Sorry, I am not a technical person, so could you please elaborate what css code to add and where?
Please add code to Custom CSS of those section.
Add this code for desktop section (hide section on mobile)
@media screen and (max-width: 767px) {
.section-header,
.grid {
display: none !important;
}
}
Add this code for mobile section
@media screen and (min-width: 768px) {
.section-header,
.grid {
display: none !important;
}
}
Hi @CW5
This is David at SalesHunterThemes.
I have not Debut V 1.0.1 on my store,
But this code I custom on Debut V - 17
Follow this path:
Themes => edit code => section => feature-columns.liquid
and replace the code in that file with this (REMEMBER backup your code first)
{% if section.settings.title != blank %}
## {{ section.settings.title | escape }}
{% endif %}
{%- assign grid_item_width = 'medium-up--one-third' -%}
{%- assign max_height = 345 -%}
{% case section.blocks.size %}
{% when 1 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{%- assign max_height = 530 -%}
{% when 2 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{%- assign max_height = 530 -%}
{% when 4 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{%- assign max_height = 530 -%}
{% endcase %}
{% for block in section.blocks %}
{% if section.blocks.size == 5 and forloop.index < 3 %}
{%- assign column_width = 'medium-up--one-half' -%}
{%- assign max_height = 530 -%}
{% else %}
{%- assign column_width = grid_item_width -%}
{% endif %}
{% if block.settings.enable_image %}
{% if block.settings.image != blank %}
{% capture img_id %}TextColumnImage-{{ block.id }}{% endcapture %}
{% capture wrapper_id %}TextColumnImageWrapper-{{ block.id }}{% endcapture %}
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- assign img_url_mobile = block.settings.image_mobile | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style', image: block.settings.image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
{% if block.settings.image_mobile != blank %}
{% endif %}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% endif %}
{% if block.settings.title != blank %}
### {{ block.settings.title | escape }}
{% endif %}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% if block.settings.button_label != blank and block.settings.button_link != blank %}
{%- capture ariaLabel -%}
{{- block.settings.button_label -}}
{%- if block.settings.button_link.type == 'frontpage_link' -%}
: {{ 'homepage.general.title' | t -}}
{%- elsif block.settings.button_link.type == 'catalog_link' -%}
: {{ 'collections.catalog.title' | t -}}
{%- elsif block.settings.button_link.object.title -%}
: {{ block.settings.button_link.object.title -}}
{%- endif -%}
{%- endcapture -%}
{{- block.settings.button_label | escape -}}
{% endif %}
{% endfor %}
{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
{% schema %}
{
"name": "Text columns with images",
"class": "index-section",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default":"Text columns with images"
},
{
"type": "select",
"id": "align_text",
"label": "Text alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Centered"
}
]
}
],
"blocks": [
{
"type": "text_block",
"name": "Column",
"settings": [
{
"type": "checkbox",
"id": "enable_image",
"label": "Show image",
"default": true
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "image_picker",
"id": "image_mobile",
"label": "Image mobile"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Add a title or tagline"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "
Share blog posts, products, or promotions with your customers. Use this text to describe products, share details on availability and style, or as a space to display recent reviews or FAQs.
"
},
{
"type": "text",
"id": "button_label",
"label": "Button label"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
}
]
}
],
"presets": [
{
"name": "Text columns with images",
"category": "Text",
"blocks": [
{
"type": "text_block"
},
{
"type": "text_block"
},
{
"type": "text_block"
}
]
}
]
}
{% endschema %}
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
David | SalesHunterThemes team
Thanks @Dan-From-Ryviu . YOu really made it easy and your response worked as a charm. 
Cheers!
Thanks David. Appreciate your help.
Cheers!
Happy I could help! 