Archived topic
image on page hero css problem
7 replies · Started by johnaps on April 12, 2020
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...
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 :)
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...?
Hi there,
if you want to display the full image then yes, each different image size will require different padding in the Header Element.
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?
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
The shortcode was perfect, did exactly what i was looking for! Thank you David <3 !
You're welcome
