[Support request] Moving profile picture on desktop to right of author bio

[lewis]

Hi there, I am looking for a way to move the author profile picture to the left of the author profile. Please see attached.

[David]

Hi there,

theres a few options, mostly rebuilding that layout and using a Grid Block to place the avatar in its own column.
Or with the current layout:

1. Add this CSS:

@media(min-width: 1024px) {
    .pull-avatar {
        position: relative;
    }

    .pull-avatar .dynamic-author-image {
        position: absolute;
        top: 30px;
        left: 30px;
    }
}

2. Select the column Container Block the avatar and profile is in, and in Advacned > Additional CSS Class(es) add: pull-avatar

[lewis]

Great, thanks for that, worked! Was just wondering is it possible to push the author image down so it is centered (see attached)? Thanks

[Fernando]

Hi Lewis,

You can try altering the CSS code provided by David into something like this:

@media(min-width: 1024px) {
    .pull-avatar {
        position: relative;
    }

    .pull-avatar .dynamic-author-image {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 30px;
    }
}

Hope this helps!

[lewis]

Works like a charm! Thanks guys!

[Fernando]

You’re welcome Lewis!

[Author]

Posts