# Our Logo/Hero image on the homepage has max-width settings but they are being overridden

**URL:** https://publichappinessmovement.com/t/topic/3736
**Category:** React Js and Meteor
**Tags:** done, webdev, reactjs
**Created:** [26 September 2023 18:01 UTC](https://publichappinessmovement.com/t/topic/3736 "2023-09-26T18:01:18Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![AndyatFocallocal](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/andyatfocallocal/32/651_2.png) [@AndyatFocallocal](https://publichappinessmovement.com/u/AndyatFocallocal)
#### Post date: [26 September 2023 18:01 UTC](https://publichappinessmovement.com/t/topic/3736/1 "2023-09-26T18:01:18Z")

</div>

Our hero image extends below the viewport on some screen sizes, which is bad UX.

It appears to already have max-width CSS rules, but something is over-riding them. Please fix it so the image reduces its size (but stays centered) on some screen sizes so that the image never extends below the bottom of the screen.

 ![image](https://publichappinessmovement.com/uploads/default/original/2X/0/0267e4eecbe0880def92ad7b9f582d4f78a7df7c.png)

Plain white, the page’s default colour, is fine to fill the now empty edges unless you have a better suggestion.

---

<div class="post-metadata">

### Author: ![AndyatFocallocal](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/andyatfocallocal/32/651_2.png) [@AndyatFocallocal](https://publichappinessmovement.com/u/AndyatFocallocal)
#### Post date: [15 October 2023 14:38 UTC](https://publichappinessmovement.com/t/topic/3736/2 "2023-10-15T14:38:37Z")

</div>

Adding you to this as we mentioned before it was connected to the homepage boxes task

---

<div class="post-metadata">

### Author: ![AndyatFocallocal](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/andyatfocallocal/32/651_2.png) [@AndyatFocallocal](https://publichappinessmovement.com/u/AndyatFocallocal)
#### Post date: [15 October 2023 14:40 UTC](https://publichappinessmovement.com/t/topic/3736/3 "2023-10-15T14:40:14Z")

</div>

The CSS is here: [https://github.com/focallocal/fl-maps/blob/deploy-phm/imports/client/ui/pages/Home/styles.scss](https://github.com/focallocal/fl-maps/blob/deploy-phm/imports/client/ui/pages/Home/styles.scss)

Its the @media statements with #hero-bg. I can’t see why it’s being overridden though.