Jumbotron not responsive & not high enoug

Illdy
1

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/

Any hints?

Cheers,
Jan

2

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:

#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:

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

Use this to center the picture:

#header {
    background-position: center;
}

Let me know if the above is working as expected.

Cheers

3

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

Cheers,
Jan

4

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

5

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

6

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.