How can I change Banner Height separately for deskop & Mobile?

Shopify Partner
87 2 7


Background: I use code to make different images between dektop & mobile, like this 




However, the banner height option is still not separated



any idea to figure it out?


Pet Travel Supplies Small Business
Replies 2 (2)
1245 111 139


  1. In the theme editor, navigate to the section containing the banner that you want to adjust the height for. This could be the "Hero" section or a custom section that includes a banner.
  2. Identify the CSS selector for the banner element. This might involve inspecting the element using your browser's developer tools.
  3. Once you have identified the CSS selector, you can add custom CSS code to modify the height for each responsive breakpoint. Here's an example:




/* Example CSS selector for the banner element */
.hero-banner {
  height: 300px; /* Default height for desktop */

  @media screen and (max-width: 767px) {
    height: 200px; /* Height for mobile devices */


Chat on WhatsApp: +923246370042
Need a Shopify developer?
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Shopify Partner
87 2 7

Hey, thank u so much.

still confusing how to find the selector. here is my browser's developer tool shows:



and here is some code of this part: 


  id="Banner-{{ }}"
  class="{% if section.settings.enable_image_mobile %}banner-image-separate-mobile {% endif %} banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.image_height == 'adapt' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}"
  {%- if section.settings.image != blank -%}
    <div class="media-first banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}">
      {%- liquid
        assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
        if section.settings.image_2 != blank
          assign image_class = 'banner__media-image-half'
        if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
          assign sizes = "(min-width: 750px) 100vw"
        elsif section.settings.image_2 != blank
          assign sizes = "100vw"
          assign sizes = "100vw"


could you tell me the exact css code? thanks.
I want to make the #2 picture shown as itselfs height but not the 1# pic's

Pet Travel Supplies Small Business