# Jumbotron not responsive & not high enoug

**URL:** <https://colorlibsupport.com/t/jumbotron-not-responsive-not-high-enoug/12018>\
**Category:** Illdy\
**Created:** [September 3, 2016, 2:01pm UTC](https://colorlibsupport.com/t/jumbotron-not-responsive-not-high-enoug/12018 "2016-09-03T14:01:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![petap](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/p/58956e/32.png) [@petap](https://colorlibsupport.com/u/petap)\
**Post date:** [September 3, 2016, 2:01pm UTC](https://colorlibsupport.com/t/jumbotron-not-responsive-not-high-enoug/12018/1 "2016-09-03T14:01:01Z")

</div>

Hi

I have issues with the jumbotron image:

1. I seems to be not high enough, meaning it will not cover the whole screen. On the bottom of the screen I have about 2-3 cm of the next section already. What is really weird: the image is cut off to allow for the next section to show…
2. When I open the website on a mobile device, I do not see the center of the image but the left bit. I had assumed that the image will be repositioned instead of just showing the top left corner.

The page is: [https://phum.de/](https://phum.de/)

Any hints?

Cheers,  
Jan

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [September 6, 2016, 2:58pm UTC](https://colorlibsupport.com/t/jumbotron-not-responsive-not-high-enoug/12018/2 "2016-09-06T14:58:20Z")

</div>

Hello Jan,

Since there are countless monitor and view sizes you will get this kind of behaviour on different screens.

It seems like you are looking for a FullHD jumbotron setup, so you might want to try this CSS code and padding spacing for the header and just play with the values until you get your perfect display:

```auto
#header .bottom-header {
    padding-top: 300px;
    padding-bottom: 300px;
}

```

You should keep in mind that this spacing will be _in charge_ on the smaller devices, as well, so a media query might and should be used:

```auto
@media (max-width: 1024px) {
  #header .bottom-header {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

```

Use this to center the picture:

```auto
#header {
    background-position: center;
}

```

Let me know if the above is working as expected.

Cheers

---

<div class="post-metadata">

**Author:** ![petap](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/p/58956e/32.png) [@petap](https://colorlibsupport.com/u/petap)\
**Post date:** [September 7, 2016, 8:05pm UTC](https://colorlibsupport.com/t/jumbotron-not-responsive-not-high-enoug/12018/3 "2016-09-07T20:05:17Z")

</div>

Wow, great, thank you very much! Exactly what I was looking for!

Cheers,  
Jan

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [September 8, 2016, 11:42am UTC](https://colorlibsupport.com/t/jumbotron-not-responsive-not-high-enoug/12018/4 "2016-09-08T11:42:23Z")

</div>

That’s great, I’m happy that I could help you out.

Will add this CSS to FAQ for future references, since you confirmed it is working as expected.

Regards

---

<div class="post-metadata">

**Author:** ![bariniivo](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/b/b9e5f3/32.png) [@bariniivo](https://colorlibsupport.com/u/bariniivo)\
**Post date:** [September 12, 2016, 1:24am UTC](https://colorlibsupport.com/t/jumbotron-not-responsive-not-high-enoug/12018/5 "2016-09-12T01:24:37Z")

</div>

I have this issue too…  
I will try the code. Which is the css file ?  
Tankyou

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [September 12, 2016, 3:34pm UTC](https://colorlibsupport.com/t/jumbotron-not-responsive-not-high-enoug/12018/6 "2016-09-12T15:34:51Z")

</div>

Ideally, the above CSS code should be placed in a child’s theme style.css  
​  
But you can use a plugin like **Simple Custom CSS** or place it directly in the default theme’s Dashboard \> Appearances \> Editor \> Style.css, but please keep in mind that this will get erased if you replace/update the theme files in the future.