Image layout on header element

Hi there,

For starters, lets change the order of the HTML elements to match your reference:

Change this:

<h1 class='page-title'>
	{{post_title}}
</h1>

<div id="category_image" class="category-image-style">
		
	[category_image_for_cat_page]
		
</div>

    <div class="category_description_class">
        <p>[category_description]</p>
    </div>

To this:

<div class="title-with-image">
<div id="category_image" class="category-image-style">
[category_image_for_cat_page]	
</div>
<h1 class='page-title'>
{{post_title}}
</h1>
</div>
<div class="category_description_class">
<p>[category_description]</p>
</div>

we then add the CSS to match.

To do that, let's first remove the previous CSS styling added.

Remove these:

.page-hero #category_image {
    margin-left: auto;
    padding: 15px;
}

.page-hero .category-image-style img {
    max-width: 150px;
    max-height: 120px;
}

And add these:

.page-hero #category_image {
    width: 160px;
    height: 160px;
    overflow: hidden;
    border-radius: 100%;
}

.page-hero #category_image img {
    width: 160px;
    height: auto;
}

As for the responsive positioning:

Let's add this:

@media(max-width:768px){
.title-with-image {
    flex-direction: column;
}

.page-hero div#category_image, .page-hero .page-title {
    margin: 0 auto;
    text-align: center;
}

.page-hero #category_image {
    width: 160px;
    height: 160px;
    overflow: hidden;
    border-radius: 100%;
}
}
@media(min-width:769px){
.title-with-image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}
}

This how it would behave: https://share.getcloudapp.com/Z4u6xzjG

If you want the description to be right beside the image as well, we may have to change the HTML a bit more.

Thank you ever so much! I am really happy with it, just a few tweaks I think:

- For desktop, to have the image align to the left and padding between the image and title (as appears nothing at the moment)

- For mobile, padding between the bottom of the image and top of the title, as quite close to each other

Hi William,

– For desktop, to have the image align to the left and padding between the image and title (as appears nothing at the moment)

Change this CSS:

@media(min-width:769px){
.title-with-image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

To:

@media(min-width:769px){
.title-with-image {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
}
.page-hero .page-title {
    padding-left: 30px;
}

– For mobile, padding between the bottom of the image and top of the title, as quite close to each other

Add this CSS:

@media (max-width: 768px) {
    .page-hero .page-title {
        padding-top: 30px;
    }
}

Let me know :)

Hi there,

Looks all good here! I wouldn't mind a bit more padding between the bottom of the image and the top of the heading if that's possible?

On pages without a category image, which is a shortcode using ACF, the header still has shifted to the right, such as here - is it possible to only allow a shift in the header title only if the image is present?

Hi William,

I wouldn’t mind a bit more padding between the bottom of the image and the top of the heading if that’s possible?

The 2nd CSS I provided in the previous reply should work, I haven't seen it's been added to your site yet. Once added, feel free to change the numbers.

only allow a shift in the header title only if the image is present?

I might be wrong, but I don't think CSS can do this automatically.

I added that code in <style> </style> on the element so it only applies to that element and not to all elements on the site, but it does not seem to pick it up it seems?

As for the CSS pushing the title if the image is there, I assume its something like a conditional if statement - is there no way to do this at all?

The css is there now, it seems working fine this time.
https://www.screencast.com/t/PLLNggjpXHo

Yes, there always will be a solution, but a custom solution like this is beyond the scope of this support forum. Thanks for understanding!

Oh yes, how strange it wasn't before but now - thanks for your support!

No problem :)

Here is a support forum scope chart we recently published:
https://generatepress.com/what-support-includes/