Aligning image within stack

  • I have a stack with a heading and news items for a particular category at the top of the page.

    I want to add a right-aligned image to the stack, but when I add the image it’s toolbar doesn’t have the ‘align’ icon.

    Can this be done? Quite happy if it’s done with custom CSS.

    I’m also happy for it to be inside the stack and it’s border, or outside it as long as it’s to the right.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hello, yes, it can be done with some custom CSS. I would add an additional CSS class to the Latest Posts block (e.g. my_latest_posts) and add the following in the Global Styles additional CSS at Appearance > Editor or via Edit Site 

    /* my_latest_posts is the additional CSS class */
/* please adjust the ff code based on your requirements */

/* Make the list of latest posts take up available width */
ul.my_latest_posts.wp-block-latest-posts { width: 100%; }

/* Place the post title and featured image side-by-side */
.my_latest_posts.wp-block-latest-posts li {
display: flex;
align-items: center;
justify-content: space-between;
}

/* Place the image to the right of the post title */
.my_latest_posts .wp-block-latest-posts__featured-image { order: 1; }
    • This reply was modified 1 year, 8 months ago by Gerry. Reason: Added some more comments to the CSS
Viewing 1 replies (of 1 total)
  • The topic ‘Aligning image within stack’ is closed to new replies.