Image not resizing relative to the size of the browser

Shopify Discussion

Topic summary

A user is experiencing issues with an image banner not resizing properly across different browser window sizes in Shopify. The banner displays badges but doesn’t scale responsively.

Initial Problem:

  • Image banner remains fixed size instead of adapting to browser width
  • Screenshots show the banner appearing cut off when browser window is resized

Solution Provided:

  • Modify CSS properties to use width: 100% and height: auto for responsive scaling
  • This allows the image to resize relative to the browser window

New Issue:

  • After implementing the fix, images now appear too small on mobile devices
  • User is asking if there’s a way to make the images display as a slideable/swipeable gallery on mobile for better visibility

Status: Partially resolved - desktop responsiveness fixed, but mobile optimization still needed.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I made plain image banner to show some badges but I cant seem to figure out how to automatically resize it relative to the size of the browser window. Attached is images of how it looks before and after resizing the browser.

Screen Shot 2023-09-25 at 11.37.48 AM.png
Screen Shot 2023-09-25 at 11.37.48 AM.png2508×940 155 KB

Screen Shot 2023-09-25 at 11.37.58 AM.png
Screen Shot 2023-09-25 at 11.37.58 AM.png1748×572 64.2 KB

Heres the code I have for the image-for-homepage

.img-container { text-align: center; }

{% if section.settings.selected_image != blank %}

{% endif %}

{% schema %}
{
“name”: “Image For Homepage”,
“class”: “image-for-homepage”,
“tag”: “section”,
“settings”: [
{
“type”: “header”,
“content”: “Select Image”
},
{
“type”: “image_picker”,
“label”: “Pick Your Image”,
“id”: “selected_image”
}

],
“presets”: [
{
“name”: “Image for Homepage”,
“category”:“Image”,
“settings”: {
}
}
]

}
{% endschema %}

{% javascript %}
{% endjavascript %}

2

Hi @Headlok ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

To make your image banner automatically resize relative to the size of the browser window, you can use CSS properties like width: 100% and height: auto. Here’s how you can modify your code to achieve this:

Best regards,

Anthony

3

This worked thank you! Now on mobile the images are way to small. Is there a way to make the image slidable on mobile so they are visible on mobile? Thanks