Moving profile picture on desktop to right of author bio

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

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

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!

Works like a charm! Thanks guys!

You’re welcome Lewis!