# .m-hero\_\_picture (Header) dimensions/sizing on different screens

**URL:** <https://forum.ghost.org/t/m-hero-picture-header-dimensions-sizing-on-different-screens/45898>\
**Category:** Themes\
**Created:** [March 20, 2024, 11:05pm UTC](https://forum.ghost.org/t/m-hero-picture-header-dimensions-sizing-on-different-screens/45898 "2024-03-20T23:05:37Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![AmbientArtstyles](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ambientartstyles/32/12169_2.png) [@AmbientArtstyles](https://forum.ghost.org/u/AmbientArtstyles)\
**Post date:** [March 20, 2024, 11:05pm UTC](https://forum.ghost.org/t/m-hero-picture-header-dimensions-sizing-on-different-screens/45898/1 "2024-03-20T23:05:37Z")

</div>

Hey all! I have searched through this forum and Reddit and could use a little bit of help thinking through an issue with my Banner Image. Two images included below show the issue.

**UPDATE - hacky solution**  
Hello anyone who comes across this in the future!

Here are two links to other threads on this topic. [[1](https://forum.ghost.org/t/casper-theme-cover-image/15246)] [[2](https://forum.ghost.org/t/responsive-images-background-image/8480)].

My problem occurred with screens at 2500px. I first added an xxl option to my partials \> hero.hbs.

```auto
<img src="{{img_url background size="s"}}" srcset="{{img_url background size="s"}} 300w, 
             {{img_url background size="m"}} 600w, 
             {{img_url background size="l"}} 1000w, 
             {{img_url background size="xl"}} 2000w,
             {{img_url background size="xxl"}} 2500w"
     sizes="(max-width: 800px) 400px, 
            (max-width: 1170px) 1170px, 
            (max-width: 2000px) 2000px,
            2500px"
     alt="Description of the image" />

```

I then added an injection to nudge the image down on xxl screens.

```auto
/* Media query for screen width 2500px or larger (XXL size) */
@media screen and (min-width: 2500px) {
    .m-hero__picture img {
        margin-top: 200px; /* Adjust as needed to move the image down */
    }
}

```

It isn’t pretty, but it’s sufficient for the moment / Until I can get some better banner images taken. Good luck out there!

**Problem**  
On “standard” sized screens/viewports (1600 × 767, and even on phones) my banner image appears as expected; however, on extra large screens (2560 × 1307), the banner gets moved up and results in ‘chopped off heads’. I am using the Liebling theme but I feel that this isn’t a problem relegated to that theme.

**Here is an example of a “normal” screen (1600 × 767)**

 ![image](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/1/1/110c26a33d1f074b607c0dc7dd789513cca12bee.jpeg)

**Here is an example of a “large” screen (2560 × 1307)**

 ![image](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/3/8/38d36afd4d8539d8da46cdf7d03a3629c5d44a5f.jpeg)

**Related Posts/Info**

- [publication logo displaying properly](https://forum.ghost.org/t/size-matters-cant-get-the-publication-logo-to-present-properly/28889/6)
- [Guide to Images with Ghost](https://forum.ghost.org/t/guide-to-images-with-ghost/17518)
- [Ghost \> Docs \> Themes \> Assets](https://ghost.org/docs/themes/assets/)

I’m lost for the best way to resolve this issue and would greatly appreciate any tips or pointers for working around the problem. I believe a solution could involve altering the m-hero\_\_picture; however, I also think the problem could be deeper and that I may be better served to just take new photos and replace the current banner images.

```auto
m-hero__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;

```