[Resolved] Image layout on header element

Home Forums Support [Resolved] Image layout on header element

Home Forums Support Image layout on header element

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1637583
    William

    Hi there,

    I currently have a header for categories that have a category image using shortcode here. The code for the header element is:

    <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>	

    I am trying to have the image of the author look similar in location to what can be seen here, both for desktop and mobile.

    What would be the best way to do this?

    #1637691
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1638073
    William

    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

    #1639691
    Ying
    Staff
    Customer Support

    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 🙂

    #1647566
    William

    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?

    #1647595
    Ying
    Staff
    Customer Support

    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.

    #1647599
    William

    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?

    #1647601
    Ying
    Staff
    Customer Support

    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!

    #1647605
    William

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

    #1647663
    Ying
    Staff
    Customer Support

    No problem 🙂

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.