Wrap text around a figure

[KirstieJane]

At the moment, our about page is hacking the figure class to stop photos of our lab members being huuuuge!

What I did was just give @Islast and me 2 pictures each and then make them half wide, but you can see that it looks a bit silly on mobile.

Here’s a snippet from the about markdown file:

<figure class="half">
    <img src="/images/KW_OpenCon2016_Square.jpg" alt="Kirstie Whitaker" width="50%">
    <img src="/images/kirstie-edinburgh-windy.jpg" alt="Kirstie on a windy hill" width="50%">
</figure>

I’d really like to be able to put a single picture on one side and then wrap text around it on the other.

Does anyone have any suggestions on how to achieve that?

• about markdown file: about/index.md
• rendered about page: https://whitakerlab.github.io/about

[KirstieJane]

Some extra information after a conversation on Twitter. One of the difficulties I have is that I didn’t build the website - I forked it from the wonderful https://github.com/mmistakes/so-simple-theme - so I don’t know WHERE i should be looking to make these changes.

So there’s really 2 steps I think:

1. How do I adjust the figure classes to have one that takes up just half of the page and then allows text on the other half (on desktop, on mobile it should be responsive and put the text below the picture)
2. Which file should this adjustment be in?