Different images for mobile, normal, and wide monitors on image with text banner section

[PearceZ]

Hi, I’m trying to have different-sized images for my homepage based on the device/monitor being used. I’ve seen other discussions on this but they don’t seem to work for me. I would like to have images for 2560 wide monitors, “normal” or medium-sized monitors, and mobile. My coding knowledge is limited so your help is appreciated!

Below is a copy and paste and screenshot of the liquid.

{%- assign text_color_brightness = section.settings.content_color | color_brightness -%}

.section--{{ section.id }} .home-intro__bg--overlay:before, .section--{{ section.id }} .home-intro__bg--cover:before { background: {{ section.settings.overlay_color }}; {% if section.settings.overlay_strength == 100 %} opacity: 1; {% else %} opacity: .{{ section.settings.overlay_strength }}; {% endif %} } .section--{{ section.id }} .home-intro__link.link, .section--{{ section.id }} .home-intro__link.link-body, .section--{{ section.id }} .home-intro__text, .section--{{ section.id }} .home-intro__text .rte a, .section--{{ section.id }} .home-intro__text .rte :is(h1, h2, h3, h4, h5, h6) { color: {{ section.settings.content_color }}; } .section--{{ section.id }} .c-btn--hollow { color: {{ section.settings.content_color }}; box-shadow: inset 0px 0px 0px 1px {{ section.settings.content_color }}; } .section--{{ section.id }} .c-btn--hollow:hover { color: {% if text_color_brightness < 125 %}white{% else %}black{% endif %}; background-color: {{ section.settings.content_color }}; } {% if section.settings.content_heading_color %} .section--{{ section.id }} .home-intro__text--heading, .section--{{ section.id }} .home-intro__text--heading .rte a, .section--{{ section.id }} .home-intro__text--heading .rte :is(h1, h2, h3, h4, h5, h6) { color: {{ settings.color_headings }}; } {% endif %} {% if section.settings.section_width == 'contained' %}

{% endif %}

{%- liquid if section.settings.bg_image == blank and section.settings.bg_color.alpha > 0 assign use_bg_color = true else assign use_bg_color = false endif -%}

{% unless use_bg_color %}
{% if section.settings.bg_image != blank %}

{% else %} .section--{{ section.id }} .home-intro__bg--placeholder:before { background: {{ section.settings.overlay_color }}; }

{{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}

{% endif %}

{% endunless %}

{%- for block in section.blocks -%} {%- case block.type -%} {%- when 'text' -%}

{%- assign gain_fraction = block.settings.text_size | times: 0.2 -%} {%- assign gain_fraction_mobile = block.settings.text_size_mobile | times: 0.2 -%} .home-intro__text--{{ block.id }} :is(p, h1, h2, h3, h4, h5, h6) { font-size: {{ block.settings.text_size | times: 0.2 | times: gain_fraction | plus: 1 }}rem; line-height: {{ block.settings.text_size | times: 0.05 | minus: 1.8 | abs }}; } @media screen and (max-width: 767px) { .home-intro__text--{{ block.id }} :is(p, h1, h2, h3, h4, h5, h6) { font-size: {{ block.settings.text_size_mobile | times: 0.2 | times: gain_fraction_mobile | plus: 1 }}rem; line-height: {{ block.settings.text_size_mobile | times: 0.05 | minus: 1.7 | abs }}; } }

{{ block.settings.text }}

{%- when ‘image’ -%}
{% unless block.settings.inline_image == blank %}

{%- assign img_url = block.settings.inline_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% endunless %}

{%- when ‘video’ -%}
{% unless block.settings.video == blank %}

{% capture video_url %}{% if block.settings.video.type == 'youtube' %}//[www.youtube.com/watch?v=](http://www.youtube.com/watch?v=){{ block.settings.video.id }}{% elsif block.settings.video.type == 'vimeo' %}//vimeo.com/{{ block.settings.video.id }}{% endif %}{% endcapture %}

{{ 'sections.video.play_label' | t }}

{% endunless %}

{%- when ‘link’ -%}
{% unless block.settings.link_title == blank %}

{{- block.settings.link_title | escape -}}

{% endunless %} {%- endcase -%} {%- endfor -%}

{% if section.settings.section_width == 'contained' %}

{% endif %}

{% schema %}
{
“name”: “Image and text banner”,
“class”: “js-section__home-intro”,
“settings”: [
{
“type”: “select”,
“id”: “section_height”,
“label”: “Section height (wide screens)”,
“options”: [
{
“label”: “Extra small”,
“value”: “extra-small”
},
{
“label”: “Small”,
“value”: “small”
},
{
“label”: “Medium”,
“value”: “medium”
},
{
“label”: “Large”,
“value”: “large”
},
{
“label”: “Extra large”,
“value”: “x-large”
}
],
“default”: “medium”
},
{
“type”: “select”,
“id”: “section_height_mobile”,
“label”: “Section height (mobile)”,
“options”: [
{
“label”: “Extra small”,
“value”: “extra-small”
},
{
“label”: “Small”,
“value”: “small”
},
{
“label”: “Medium”,
“value”: “medium”
},
{
“label”: “Large”,
“value”: “large”
},
{
“label”: “Extra large”,
“value”: “x-large”
}
],
“default”: “medium”
},
{
“type”: “select”,
“id”: “section_width”,
“label”: “Section width”,
“default”: “contained”,
“options”: [
{
“label”: “Contained”,
“value”: “contained”
},
{
“label”: “Full”,
“value”: “full”
}
]
},
{
“type”: “select”,
“id”: “content_alignment”,
“label”: “Content alignment”,
“options”: [
{
“label”: “Left”,
“value”: “left”
},
{
“label”: “Center”,
“value”: “center”
},
{
“label”: “Right”,
“value”: “right”
}
],
“default”: “center”
},
{
“type”: “color”,
“id”: “content_color”,
“label”: “Content color”,
“default”: “#ffffff”
},
{
“type”: “checkbox”,
“id”: “content_heading_color”,
“label”: “Use default heading color”,
“default”: false
},
{
“type”: “color”,
“id”: “bg_color”,
“label”: “Background color”,
“default”: “rgba(0,0,0,0)”
},
{
“type”: “image_picker”,
“id”: “bg_image”,
“label”: “Background image”,
“info”: “2200px width recommended.”
},
{
“type”: “color”,
“id”: “overlay_color”,
“label”: “Overlay color”,
“default”: “#000000”
},
{
“type”: “range”,
“id”: “overlay_strength”,
“label”: “Overlay strength”,
“unit”: “%”,
“min”: 0,
“max”: 100,
“step”: 10,
“default”: 10
},
{
“type”: “checkbox”,
“id”: “section-bottom-margin”,
“label”: “Reduce bottom margin”,
“default”: false
}
],
“blocks”: [
{
“type”: “text”,
“name”: “Text”,
“settings”: [
{
“type”: “richtext”,
“id”: “text”,
“label”: “Text”,
“default”: “

Offer some insight into your brand and history. Use images, text and video to describe your value proposition.

”
},
{
“type”: “range”,
“id”: “text_size”,
“label”: “Text size (wide screens)”,
“min”: 1,
“max”: 15,
“step”: 1,
“default”: 3
},
{
“type”: “range”,
“id”: “text_width”,
“label”: “Text width (wide screens)”,
“min”: 10,
“max”: 100,
“step”: 5,
“default”: 40
},
{
“type”: “range”,
“id”: “text_size_mobile”,
“label”: “Text size (mobile)”,
“min”: 1,
“max”: 10,
“step”: 1,
“default”: 3
},
{
“type”: “select”,
“id”: “text_style”,
“label”: “Font style”,
“options”: [
{
“value”: “body”,
“label”: “Body”
},
{
“value”: “heading”,
“label”: “Heading”
}
],
“default”: “body”
}
]
},
{
“type”: “image”,
“name”: “Inline image”,
“settings”: [
{
“type”: “image_picker”,
“id”: “inline_image”,
“label”: “Image”
},
{
“type”: “range”,
“id”: “inline_image_width”,
“label”: “Image width”,
“unit”: “px”,
“min”: 50,
“max”: 800,
“step”: 10,
“default”: 200
},
{
“type”: “range”,
“id”: “inline_image_radius”,
“label”: “Image corner radius”,
“min”: 0,
“max”: 30,
“step”: 1,
“unit”: “px”,
“default”: 0
}
]
},
{
“type”: “video”,
“name”: “Popup video”,
“settings”: [
{
“type”: “video_url”,
“id”: “video”,
“label”: “YouTube or Vimeo link”,
“accept”: [“youtube”, “vimeo”]
}
]
},
{
“type”: “link”,
“name”: “Link”,
“settings”: [
{
“type”: “text”,
“id”: “link_title”,
“label”: “Link label”,
“default”: “Shop all”
},
{
“type”: “url”,
“id”: “link”,
“label”: “Link”
},
{
“type”: “select”,
“id”: “link_style”,
“label”: “Link style”,
“options”: [
{
“value”: “link-body”,
“label”: “Body text”
},
{
“value”: “link link–arrow”,
“label”: “Chevron”
},
{
“value”: “c-btn c-btn–hollow”,
“label”: “Outline button”
},
{
“value”: “c-btn c-btn–primary”,
“label”: “Solid button”
}
],
“default”: “c-btn c-btn–hollow”
}
]
}
],
“presets”: [
{
“name”: “Image and text banner”,
“blocks”: [
{
“type”: “text”,
“settings”: {
“text_size”: 6,
“text_width”: 65,
“text_size_mobile”: 3
}
},
{
“type”: “link”
}
]
}
],
“enabled_on”: {
“templates”: [“*”],
“groups”: [“header”, “footer”]
}
}
{% endschema %}