Category custom field displaying on post header element

Hi there,

you may want to ask the ACF support team how to retrieve that field, here is a related topic:

https://support.advancedcustomfields.com/forums/topic/displaying-fields-from-post-category-or-subcategory/

For the hero layout - on your Category pages you have this CSS:

.page-hero #category {
    display: flex;
    align-items: flex-start;
}

It is applied to this element:

<div id="category">

Whereas your books <div> is:

<div id="book">

Edit your <div> to include a class of hero-row e,g

<div id="category"> becomes <div id="category" class="hero-row">

and

<div id="book"> becomes <div id="book" class="hero-row">

then change the above CSS to:

.page-hero .hero-row {
    display: flex;
    align-items: flex-start;
}

when styling multiple elements the same way - try using Classes instead of ID :)

Hi there,
Understood and corrected, thanks for that!

The image is slightly not in the same location though - seems like a padding issue from experience but is there a way so that the image is in exactly the same location for both of the links? (category archive page and post page)

And also the sizing change across desktop/mobile is slightly different between the two pages too.

Its the difference in HTML and the associated CSS.
For example on the book you have this:

.page-hero #book {
    padding-left: 30px;
    padding-top: 20px;
    padding-bottom: 10px;
}

which is applying the padding to the parent container 'hero-row'.

Whereas on Category the padding is added to the title container which is inside the hero-row and its also less padding:

.page-hero #category_title {
    padding: 20px;
}

Apply the same principles we did with the hero-row - add CSS classes for these common styles

Thank you very much for that - I think everything is nearly there just a few little niggles then I am done - I really appreciate your help on this:

On the category page on mobile (here), the image is too small (I want it to be a minimum of 140px width for mobile). It's fine on posts such as here

Also, for the post header hook element, I would love for the 'book_info' to be vertically centered.

1. Try this CSS to change category image size on mobile:

@media (max-width: 768px) {
    .page-hero #category_image img {
        max-height: unset;
        max-width: 140px;
    }
}

2. This to center those elements:

.page-hero #book_info {
    align-self: center;
}

.page-hero #book_info #post_title h1 {
    margin-bottom: 0;
}

That's brilliant, thank you so much for this help - you guys are awesome

You're welcome