How to optimize background images for smaller screens?

Store Design
1

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.

2

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.

1 Like
3

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.


  {% if section.blocks.size > 0 %}      
  {% for block in section.blocks %}
  {% if block.settings.link != blank %}{% endif%}
  {% if block.settings.image != blank %}
  
  {% else %}
  
![banner|1920x650](upload://ySx8DqAB0Op6PWnU7fjRI6rFvkg.png)

  {% endif %}
  {% if block.settings.link != blank %}{% endif %}
  

    

     
      {% if block.settings.storytop != blank %}
      **{{ block.settings.storytop }}**
      {% endif %}
      {% if block.settings.storytitle != blank %}
      ## {{ block.settings.storytitle }}
      {% endif %}
      {% if block.settings.storysubtitle != blank %}
      

{{ block.settings.storysubtitle }}

      {% endif %}
      {% if block.settings.link != blank %}
      {{ block.settings.btntxt }}
      {% endif %}
    

  

  {% endfor %}
  {% endif %}

{% 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": "

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

"
        },
        {
            "type": "text",
            "id": "btntxt",
            "label": "Button Label",
            "default": "Shop now"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Sale Banner - Left",
      "category": "Image",
      "blocks": [
        {
            "type": "Image"
        }
      ]
    }
  ]
}
{% endschema %}
4

Hi @makersh ,

Please change all code:


  {% if section.blocks.size > 0 %}      
  {% for block in section.blocks %}
  {% if block.settings.link != blank %}{% endif%}
  

  {% if block.settings.image != blank %}
  
  {% else %}
  
![banner|1920x650](upload://ySx8DqAB0Op6PWnU7fjRI6rFvkg.png)

  {% endif %}
  

  {% if block.settings.image_mobile != blank %}
  
    
  

  {% endif %} 
    
  {% if block.settings.link != blank %}{% endif %}
  

    

     
      {% if block.settings.storytop != blank %}
      **{{ block.settings.storytop }}**
      {% endif %}
      {% if block.settings.storytitle != blank %}
      ## {{ block.settings.storytitle }}
      {% endif %}
      {% if block.settings.storysubtitle != blank %}
      

{{ block.settings.storysubtitle }}

      {% endif %}
      {% if block.settings.link != blank %}
      {{ block.settings.btntxt }}
      {% endif %}
    

  

  {% endfor %}
  {% endif %}

{% 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": "

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

"
        },
        {
            "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!

1 Like
5

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

1 Like