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

Store Design
, , ,
1

Site: Julibees.com

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

Shawn512_0-1684845825191.png
Shawn512_0-1684845825191.png472×1064 122 KB

Question

However, the banner height option is still not separated

Shawn512_1-1684845889789.png
Shawn512_1-1684845889789.png347×190 3.21 KB

any idea to figure it out?

2
  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 */
  }
}
3

Hey, thank u so much.

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

Shawn512_0-1684853292757.png
Shawn512_0-1684853292757.png2509×974 824 KB

and here is some code of this part:


  {%- if section.settings.image != blank -%}
    

      {%- 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'
        endif
        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"
        else
          assign sizes = "100vw"
        endif
      -%}

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