Image Banner Size

Technical Q&A
, , ,

Topic summary

A user is struggling to customize their Shopify image banner with three specific requirements:

Desktop adjustments needed:

  • Reduce banner height to match desktop dimensions
  • Add spacing between banner and next section
  • Reposition title and paragraph lower on the banner

Mobile requirements:

  • Maintain full-width image display
  • Keep title and paragraph in consistent positions

A community member provided CSS solutions using media queries:

  • Desktop: Set fixed banner height (e.g., 500px) and adjust content padding-top to move text lower
  • Mobile: Use height: auto with background-size: cover for full-width display, with adjustable padding for text positioning

The suggested approach uses @media queries to target different screen sizes (min-width: 768px for desktop, max-width: 767px for mobile). The user can customize pixel values to achieve desired spacing and positioning.

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

Hello everyone!
I am facing some problems with the image banner and I’d be so grateful if someone can help me.

I need to reduce the image banner height so that it finish with the desktop size but still with some space from the next section.
Moreover, I’d like to have the title and paragraph lower than it is right now.

Finally, I need the image banner to be exactly the same for the mobile so with the entire image in width but also the title and paragraph in the same position.

I know these are a lot of requests but I have tried everything I know and nothing works…

Hope you’ll understand and help me!!

Here is my link:

mohwhi

2

Hi,

Hope this will help

  • Find Your Banner Section
  • Adjust Banner Height (Desktop)and keep mobile banner same with adding space

CSS code example (Desktop)

/* Desktop - reduce banner height */
@media screen and (min-width: 768px) {
  .banner {
    height: 500px; /* You can adjust this number */
  }

  .banner__content {
    padding-top: 300px; /* Moves text lower */
  }
}

For mobile cas example

/* Mobile - full width, same look */
@media screen and (max-width: 767px) {
  .banner {
    height: auto;
    background-size: cover;
  }

  .banner__content {
    padding-top: 200px; /* Adjust if needed */
    text-align: center;
  }
}