How to change image banner height size for mobile for specific image

Store Design
,

Topic summary

A Shopify store owner using the Dawn theme seeks to reduce image banner heights on mobile devices for specific images only, not site-wide.

Initial Solution Attempt:

  • Helper provides CSS code to be added to theme.liquid file before </head> tag
  • User clarifies they need targeting for specific images, not global changes

Refinement Process:

  • User shares three homepage banner images via screenshots requiring height adjustment
  • Helper provides updated CSS targeting specific elements
  • User attempts placing code in image banner editor’s custom CSS section without success

Current Issue:

  • When CSS is correctly placed in theme.liquid, it successfully reduces banner heights but unintentionally affects the hero image as well
  • Helper acknowledges the problem: the banners and hero image share the same CSS classes, causing the styling to apply to both

Status: Unresolved. The discussion ends without a working solution that targets only the three specific image banners while excluding the hero image.

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

How to change image banner height size for mobile, for specific image (not for the whole website)
using dawn theme

2

Hello, @Elay
Please share “Store URL”
Thanks!

3

https://countinghearts.com/

4

Hi @Elay

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

5

Hi, I want it to be on a specific image not for across all the website

6

Please share screen shot of those specific image which you want to change..
Thank you

7

This 3 images in the homepage

IMG_5290.png
IMG_5290.png1170×2532 307 KB

IMG_5289.png
IMG_5289.png1170×2532 243 KB

IMG_5288.png
IMG_5288.png1170×2532 241 KB

8

try this one code
9

I Pasted it in the custom css section in the image banner editor and nothing happened

@topnewyork

10

you don’t need to paste there. try this one…

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before
11

It works but it affecting also the hero image, which i don’t want it. only on the image banners.
Thanks for the help!

@topnewyork

1 Like
12

@Elay Sorry for late reply, You have used the same CSS classes, which is why they will also apply to the hero image.yoyu
Thank you!