How does a single image banner resize on different screens?

[iHuzjak]

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.

[EcomGraduates]

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:

<div class="banner-container">
  <img src="{{ 'banner-image.jpg' | asset_url }}" alt="Banner Image">
</div>

<style>
  .banner-container {
    max-width: 100%;
    overflow: hidden;
    text-align: center;
  }
  
  .banner-container img {
    width: 100%;
    height: auto;
  }
  
  @media (max-width: 768px) {
    /* Adjust styles for screens with a maximum width of 768px */
    .banner-container {
      max-width: 100%;
    }
  }
</style>

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.

[iHuzjak]

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.

<style>
.img-container {
  text-align: center;
}
</style>
{% if section.settings.selected_image != blank %}
<div class="img-container">
  <img src="{{ section.settings.selected_image | img_url: "master" }}">
</div>
{% 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 %}

[tallowbar]

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?