Header image

This is also the case on mobile I found out today

Hi there,

I’d either change the image to have a different aspect ratio, or add some CSS to set a min-height for the header:

@media only screen and (min-width:728px) {
  #pen_header .pen_header_inner {
    min-height: 400px;
  }
}
/* Mobile. */
@media only screen and (max-width:728px) {
  #pen_header .pen_header_inner {
    min-height: 500px;
  }
}

You can add the CSS through Appearance → Customize → Additional CSS.

`Best
I have done what you have given unfortunately this does not work ?? also I had already made my own css file with my own custom css in it and that works like the one now playing.
See photo 1 that’s normal
photo1:
https://prnt.sc/JP94DlsqP9om
See photo 2 there I made the browser small
photo2:
https://prnt.sc/M0OYTE1N6-hQ

I did what you said by the way see the picture..
photo 3:
https://prnt.sc/JrG2wndGkqmV

• This reply was modified 2 years, 9 months ago by Marinuszz.

I changed the header size to 2076 x 576 pixels
But it’s not quite it yet and it’s so big right away.. is there another possibility? because, I’ve tried several things custom css for headerlogo but it doesn’t work either.. I hope you can help me with it so that the image is 100% visible and not that it leaves a piece..

regards

It is possible, if you change the min-height based on the screen size (which means multiple media queries) or chose a fixed-width layout and only adjust the min-height for mobile and possibly tablet to make sure it fits well (which means two media queries per device), you can find the breakpoints at /pen/assets/css/pen-header.css, hope it helps!

Best
I’ve tried several things, can’t you as a theme designer make something so that he displays the images properly? I also included my own css there but that has nothing to do with the header so that’s it I haven’t tried many things, but I’m not that experienced in this yet. so can you mean something to me?

And

I changed the following..
#pen_header .pen_header_inner .pen_header_main {
color: #333;
float: left;
min-height: 200px;
position: relative;
transition: padding .3s;
width: 100%;
z index: 2;

nasty

#pen_header .pen_header_inner .pen_header_main {
color: #333;
float: left;
min-height: 400px;
position: relative;
transition: padding .3s;
width: 100%;
z index: 2;

this works now although I had to delete my cookies\

regards

• This reply was modified 2 years, 9 months ago by Marinuszz.
• This reply was modified 2 years, 9 months ago by Marinuszz.

It’s fine with me now but not with someone else.. how can I fix that..
I have no problems with this header format with other themes.
regards

The main files should never be edited, you should have only added that piece of CSS code, through Appearance → Customize → Additional CSS.

As for the image, since you are using the “Wide” layout the image needs to stretch to the entire width of the screen, or browser window, and that is causing the problem. I’d suggest the “Boxed” layout which has a fixed width of 1200px on desktop, and then you can adjust the min-height for just the mobile version.

The one for whom I’m making the site wants the full width and no boxed layout, I also put it back to how it was and put all the extra things and the css extra but it remains the same at full width
so can you make an update so that it works as it should ?

regards

In that case, I can only suggest background-position:center center for that, which would look like:

#pen_header .pen_header_inner {
  background-position:center center;
}

I’m curious to see those other themes, how they have managed to have the whole entire image with varying widths, unless JavaScript was used to set the height based on the width and aspect ratio.

I will not know how they do that other themes, search on generatepress is also a theme with many possibilities.
I also get it here on the PC now reasonably and on mobile it is not correct at all. I don’t know what’s wrong
This is the full header..
https://www.djmarinus.nl/h4you/wp-content/uploads/2022/05/h4youheader.jpg
the last code you gave with center doesn’t matter it doesn’t do anything..

regards

it seems that the header does not adapt to the size of the user’s screen, this also applies to mobile, could you fix this in an update of the theme
when I connect a smaller monitor to my pc I don’t see the full header! If I connect my PC to my 1.50M television then it’s fine.

regards

What you want can be done by adding multiple media queries and min-height for different screen sizes. However, if that does not do it for you, please first revert all the CSS files back to their original as I’ve noticed there is some incorrect CSS in your edits as well – and they will be overridden with any update anyway.
Once they are the original files again, try the following code, perhaps this gets you closer to what you are expecting?

#pen_header .pen_header_main {
  background-size: contain !important;
}

It should go to Appearance → Customize → Additional CSS.

Dear, we have put everything back to original..
this is all we have in the extra css ..

@media only screen and (min-width:728px) {
  #pen_header .pen_header_inner {
    min-height: 400px;
  }
}
/* Mobile. */
@media only screen and (max-width:728px) {
  #pen_header .pen_header_inner {
    min-height: 500px;
  }
}

#pen_header .pen_header_inner {
  background-position:center center;
}

#pen_header .pen_header_main {
  background-size: contain !important;
}

unfortunately this has no effect either.
where is it wrong
see the site https://djmarinus.nl/h4you

regards

Remove all of that and put this one in there instead:

#pen_header .pen_header_main {
  min-height: calc( ( 243 * 100vw ) / 1024 );
}

Also, the pen-header.css seems to be still the edited version.