[Resolved] image on page hero css problem

[johnaps]

Hello, i wanted to ask if i add a featured image on my post page thats controlled by a header hero, shouldnt it automatically adjust the post title margins/padding’s ?

if i add a bigger image you can see it is mixed with the title…
Also the last weird thing is when i open dev console i cant click the image element on the header hero…

[Leo]

Hi there,

Not 100% if I understand but would this screenshot explains how it works?
https://www.screencast.com/t/bL4YofwAdlS

The size of the background image is determined by the padding and the content inside of it.

Let me know if this helps 🙂

[johnaps]

basically what i am asking is, if i have to change manually the padding of .page-hero on every post, if the image has different dimensions…?

[David]

Hi there,

if you want to display the full image then yes, each different image size will require different padding in the Header Element.

[johnaps]

thats very unconvenient…
1. so i ll have to crop every image to specific dimensions to avoid this problem?
2. isnt it possible to include featured image as an separate div inside page-hero so i can control it with css globally?

[David]

1. If you want consistent sized featured images or hero backgrounds then yes.
2. You can create a short code to output the img – this topic provides how:

https://generatepress.com/forums/topic/individual-images-on-solid-hero/#post-1034354

[johnaps]

The shortcode was perfect, did exactly what i was looking for! Thank you David <3 !

[David]

You’re welcome

[Author]

Posts