[Resolved] Can i get my post meta to look like this?

[Heath]

I was wanting my post Meta to look like the screenshot. Is this possible?

[Heath]

It would also help if I give my website. It’s in the private field as well.

[Fernando]

Hi Heath,

It should be possible. You’ll need to use a Block Element – Post Meta to easily design the Post meta section.

See here for reference: https://docs.generatepress.com/article/block-element-post-meta-template/

[Heath]

Hey Fernando, I need a little more guidance on how to get these row exactly. The document didn’t really tell me.

I’m also wondering about the social icon. How i get that to show for each different author.

Thanks for your time.

[Ying]

Hi Heath,

This video demonstrates an author box which is pretty similar to your example post meta.
https://youtu.be/4x6CjGOyagc

And this video introduced how to add dynamic social links attached to the author.
https://youtu.be/HMhUo91RjsE

[Heath]

I am trying this but I’m stuck. There is a large gap between the date and the By underneath and I need these beside the author image.

I included a screen shot in the private area.

[Ying]

I can’t tell the reason by seeing the screenshot, can you publish it and link me to the post where I can see this?

[Heath]

I published the one I was working on. Thanks for taking a look!

[Ying]

The gap is the margin-bottom of the container block, you can remove or reduce the margin bottom.
https://www.screencast.com/t/FqFmde5x

[Heath]

Definitely getting there but how do I get the author picture to be more in the middle of the published date and the by?

https://ibb.co/pPYPPnK

Is there a way to lessen the gap between published date and written by just a little more?

[Heath]

As a reminder, this is what I’m shooting for.

https://ibb.co/qR338M3

[Fernando]

Hi Heath,

You’ll need to change your current structure.

Specifically, you’ll need to use a GB Grid Block. Set it to two columns, and then add the image to the left column. Then, the two Headline Blocks for the “By” and date on the right column.

[Heath]

I’m still having issues after I set the two columns. Nothing lines up and it is now showing my name above everything as well. I’ve clear my cache and it still shows weird. I’ve sent a screen shot.

[Heath]

I think I figured out the extra name thing so scratch that but the author profile picture is still showing above the published date and by and not beside it.

Also still struggling to add the social icon after the author name.

[Fernando]

Let’s tackle the alignment issue first.

On Mobile view, you’ll need to set the columns of the Grid Block to have a Container Width that would total to 100%.

Right now, you have both set to 100% by default which is why the image is going above.

Try something like 50% and 50% or 25% and 75% or 33% and 66%. Anything should work as long as the total is equal or below 100%.

Example: https://share.getcloudapp.com/kpuWJ665

[Author]

Posts