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’.
…………………………………………………………………………………………………………………………..
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.
…………………………………………………………………………………………………………………………..
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.