Resurrection 2

Bluebeard

Above is what currently happens if you simply add two images. They refuse to display on the front end side by side. It’s a huge issue, as I’ve discovered with a bit of Googling around ‘side by side images in WordPress’.

…………………………………………………………………………………………………………………………..

Resurrection 2

Bluebeard

However, with a bit of inline css code, we can fix the issue – as above.

…………………………………………………………………………………………………………………………..

Here’s the code for the first two images that refuse to line up:

<img class=”alignnone size-full wp-image-1070″ src=”http://www.traceyholland.co.uk/wp-content/uploads/2019/12/Resurrection-2.jpg” alt=”Resurrection 2″ width=”150″ height=”150″ />

<img class=”alignnone size-full wp-image-1069″ src=”http://www.traceyholland.co.uk/wp-content/uploads/2019/12/Bluebeard.jpg” alt=”Bluebeard” width=”150″ height=”150″ />

To get them to line up, replace the parts in bold, as follows:

<img style=”float: left; margin-right: 15px;” src=”http://www.traceyholland.co.uk/wp-content/uploads/2019/12/Resurrection-2.jpg” alt=”Resurrection 2″ width=”150″ height=”150″ />

<img style=”display: inline-block; margin-right: 15px;” src=”http://www.traceyholland.co.uk/wp-content/uploads/2019/12/Bluebeard.jpg” alt=”Bluebeard” width=”150″ height=”150″ />

You can change the 15px margin if you want to.

Not ideal, but it does work.

…………………………………………………………………………………………………………………………..

Hineingrabe

Resurrection 2

Bluebeard

Works for more than two images if you use the “float: left css for the first two and the ‘inline-block css for the last one.