Website Assistance

Store Design
, ,

Topic summary

A user working with the Shopify “Taste” theme wants to reduce the height of a large banner. They attempted to use CSS code targeting .header-banner and .slideshow classes with a height property set to 300px, but saw no changes when adjusting values (300px → 200px → 100px).

Issue identified:

  • Another user pointed out that min-height CSS properties may be overriding the custom height values
  • The helper asked for clarification on whether the banner should be reduced on mobile, desktop, or both

Current status:

  • The problem remains unresolved
  • Additional information needed about device targeting and existing CSS conflicts
Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Hi Everyone,

I am using the theme “taste” and I don’t like the huge banner. So I tried this code:

.header-banner, .slideshow {
height: 300px; /* Adjust this value to your desired height /
overflow: hidden; / Ensure content does not overflow */
}

.header-banner img, .slideshow img {
height: 100%;
width: auto; /* Ensure the image maintains its aspect ratio */
}

I changed the “height” to 200px, nothing happened. I changed it to 100px and it was still the same.

Any idea what I could be doing wrong?

Thanks :slightly_smiling_face:

My website: www.firdosmarket.com

2

@Firdos1 - it did not work from 300 to 200 as min-height css has been set, do you want to make image smaller on mobile or on desktop?