How to optimize background images for smaller screens?

[makersh]

I have been trying to correct and really stumped for this issue I'm having. It would make my day if someone could take a look.

You can test issue here when reducing the width of the browser. https://makersharvest.com.au

When the browser width reduces, the background image I've produced for the chutney/fruitcake sections are 2000x571, my best guess is they are too short. But if I increase it, I will have an issue with the desktop view

I hope this makes sense.

[LitCommerce]

Hi @makersh,

If you want to use one image for all sizes, it won't really fit. So I recommend you to use 2 images for it, 1 display on desktop and 1 on mobile.

if you want, please send me the code of the file section, I will help you add options for it.

[makersh]

Thank you. I've attached a screenshot of the section attached.

This is the text on left, image on right section. 

I have a separate section for a reversed right layout. I should be able to update that myself.

I really appreciate your help.

<div class="salebnr">
  {% if section.blocks.size > 0 %}      
  {% for block in section.blocks %}
  {% if block.settings.link != blank %}<a href="{{ block.settings.link }}" title="{{ 'wbcustomlabel.wballtext.banner' | t }}">{% endif%}
  {% if block.settings.image != blank %}
  <img loading="lazy" src="{{ block.settings.image | img_url: 'master' }}" alt="{{ block.settings.image.alt }}" class="img-fluid mx-auto" width="{{ block.settings.image.width }}" height="{{ block.settings.image.height }}"/>
  {% else %}
  <img loading="lazy" src="https://dummyimage.com/1920x650/eee" class="img-fluid mx-auto" alt="banner" width="1920" height="650"/>
  {% endif %}
  {% if block.settings.link != blank %}</a>{% endif %}
  <div class="salebtxt-lr">
    <div class="salebtxtinr-left">
     
      {% if block.settings.storytop != blank %}
      <strong>{{ block.settings.storytop }}</strong>
      {% endif %}
      {% if block.settings.storytitle != blank %}
      <h2>{{ block.settings.storytitle }}</h2>
      {% endif %}
      {% if block.settings.storysubtitle != blank %}
      <p>{{ block.settings.storysubtitle }}</p>
      {% endif %}
      {% if block.settings.link != blank %}
      <a href="{{ block.settings.link }}" class="btn btn-primary">{{ block.settings.btntxt }}</a>
      {% endif %}
    </div>
  </div>
  {% endfor %}
  {% endif %}
</div>
{% schema %}
{
"name": "Sale Banner - Left",
"class": "spaced-section",
"settings": [
],
 "blocks": [
    {
      "type": "Image",
      "name": "Sale Banner - Left",
      "settings": [ 
        {
            "type": "image_picker",
            "id": "image",
            "label": "Image",
            "info": "Size: 1920x650"
        },
        {
            "type": "url",
            "id": "link",
            "label": "Link URL"
        },
		{
            "type": "text",
            "id": "storytop",
            "label": "Topheading",
            "default": "100% Organic Foods"
        },
        {
            "type": "text",
            "id": "storytitle",
            "label": "Heading",
            "default": "Organic Veggies Food Cook Healthy"
        },
        {
            "type": "textarea",
            "id": "storysubtitle",
            "label": "Subheading",
            "default": "<p>Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. atmsphere</p>"
        },
        {
            "type": "text",
            "id": "btntxt",
            "label": "Button Label",
            "default": "Shop now"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Sale Banner - Left",
      "category": "Image",
      "blocks": [
        {
            "type": "Image"
        }
      ]
    }
  ]
}
{% endschema %}

[LitCommerce · Accepted solution]

Hi @makersh,

Please change all code:

<div class="salebnr">
  {% if section.blocks.size > 0 %}      
  {% for block in section.blocks %}
  {% if block.settings.link != blank %}<a href="{{ block.settings.link }}" title="{{ 'wbcustomlabel.wballtext.banner' | t }}">{% endif%}
  <div class="{% if block.settings.image_mobile != blank %}small-hide{% endif %}">
  {% if block.settings.image != blank %}
  <img loading="lazy" src="{{ block.settings.image | img_url: 'master' }}" alt="{{ block.settings.image.alt }}" class="img-fluid mx-auto" width="{{ block.settings.image.width }}" height="{{ block.settings.image.height }}"/>
  {% else %}
  <img loading="lazy" src="https://dummyimage.com/1920x650/eee" class="img-fluid mx-auto" alt="banner" width="1920" height="650"/>
  {% endif %}
  </div>
  {% if block.settings.image_mobile != blank %}
  <div class="medium-hide large-up-hide">
    <img loading="lazy" src="{{ block.settings.image_mobile | img_url: 'master' }}" alt="{{ block.settings.image_mobile.alt }}" class="img-fluid mx-auto" width="{{ block.settings.image_mobile.width }}" height="{{ block.settings.image_mobile.height }}"/>
  </div>
  {% endif %} 
    
  {% if block.settings.link != blank %}</a>{% endif %}
  <div class="salebtxt-lr">
    <div class="salebtxtinr-left">
     
      {% if block.settings.storytop != blank %}
      <strong>{{ block.settings.storytop }}</strong>
      {% endif %}
      {% if block.settings.storytitle != blank %}
      <h2>{{ block.settings.storytitle }}</h2>
      {% endif %}
      {% if block.settings.storysubtitle != blank %}
      <p>{{ block.settings.storysubtitle }}</p>
      {% endif %}
      {% if block.settings.link != blank %}
      <a href="{{ block.settings.link }}" class="btn btn-primary">{{ block.settings.btntxt }}</a>
      {% endif %}
    </div>
  </div>
  {% endfor %}
  {% endif %}
</div>
{% schema %}
{
"name": "Sale Banner - Left",
"class": "spaced-section",
"settings": [
],
 "blocks": [
    {
      "type": "Image",
      "name": "Sale Banner - Left",
      "settings": [ 
        {
            "type": "image_picker",
            "id": "image",
            "label": "Image",
            "info": "Size: 1920x650"
        },
        {
            "type": "image_picker",
            "id": "image_mobile",
            "label": "Image mobile"
        },
        {
            "type": "url",
            "id": "link",
            "label": "Link URL"
        },
		{
            "type": "text",
            "id": "storytop",
            "label": "Topheading",
            "default": "100% Organic Foods"
        },
        {
            "type": "text",
            "id": "storytitle",
            "label": "Heading",
            "default": "Organic Veggies Food Cook Healthy"
        },
        {
            "type": "textarea",
            "id": "storysubtitle",
            "label": "Subheading",
            "default": "<p>Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. atmsphere</p>"
        },
        {
            "type": "text",
            "id": "btntxt",
            "label": "Button Label",
            "default": "Shop now"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Sale Banner - Left",
      "category": "Image",
      "blocks": [
        {
            "type": "Image"
        }
      ]
    }
  ]
}
{% endschema %}

I helped you add options for Image mobile.

Hope it helps!

[makersh]

Thank you. I compared the before and after and I am starting to understand what's going on. Thank you for your time.