Website Banner Image Margins

Technical Q&A

Topic summary

A user is experiencing CSS alignment issues with their website’s banner image. They want the banner’s width and margins to match the rest of the page content, display full-width on mobile devices, and maintain a fixed height of 500-600 pixels that doesn’t scale proportionally with width changes.

Current Problem:

  • The existing CSS code (.banner with height: 500px, width: 90%, margin: 0 auto) is not producing the desired result
  • An attached screenshot illustrates the target layout

Status:

  • The user provided their website URL (www.dmminisus.com) for troubleshooting
  • A community member requested the URL to assist
  • The discussion remains open, awaiting technical guidance on the proper CSS solution
Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

My front page aesthetic is getting on my nerve. I’d like the width/margins of my banner image to be aligned with the rest of my webpage and full width on mobile. I’d like to keep the height around 500-600 pixels so the image isn’t gigantic. I’d like the picture’s scale to adjust with the width but not the height.

I’m currently using this code that’s not working:

.banner {
height: 500px;
width: 90%;
margin: 0 auto;
}

Here is the an example of what I’m looking for.

Ugh.jpg
Ugh.jpg2425×1227 359 KB

Thanks,

Raphael

2

Hi @DMMinis

Can you please provide your url

Thanks

3

www.dmminisus.com

Thank you!

4

Bump