How does a single image banner resize on different screens?

Store Design
, ,

Topic summary

A user implemented a single image banner code from Shopify community but needs help making it responsive across different screen sizes, particularly for mobile devices where the banner doesn’t display properly despite looking perfect on desktop/fullscreen.

Proposed Solution:

  • Use CSS media queries to handle responsive design
  • Set image width to 100% so it resizes based on parent container
  • Add max-width media query at 768px breakpoint for mobile devices
  • Set image height to auto for proper scaling

Implementation Challenge:
When the original poster shared their existing Liquid code (a section schema with image picker settings), they requested guidance on integrating the responsive CSS. Another user encountered an error when attempting to apply the code, receiving a message that the “editor session can’t be published” when saving to the CSS section.

Status: The discussion remains open with unanswered questions about proper CSS integration into the existing Shopify section code and troubleshooting the save error.

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

Hi, I’ve found a code in Shopify community for single image banner. Now question is how does that image resize on screen if customer let’s say enter via mobile, because on desktop and full screen looks perfect. Any help around this? Or if someone has hero page with same requests.

2

hello there

When it comes to responsive design, it’s important to use CSS media queries to adjust the layout and styling of elements based on the screen size. In the case of a single image banner, you can use CSS to set the width of the image to 100% so that it will resize based on the width of the parent container.

Here is an example of how you can modify the code for a single image banner to make it responsive:

In this example, we use CSS to set the width of the image to 100% and the height to auto, so that the image will resize based on the width of the parent container. We also use a media query to adjust the max-width of the banner container for screens with a maximum width of 768px, which is a common breakpoint for mobile devices.

3

Can you tell me how would you add that adjust to this code? I copied this code from one of the Shopify partners in this community.


{% 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 %}
4

Hi, I’ve tried to apply this code however when i hit save it says: Online Store editor session can’t be published. I am just adding it to the CSS section right?