How to Place Your Images Side by Side in a Steemit Post
Yesterday I made a quick little post with several pictures in it. I tinkered around with the markdown code to get several of them lined up horizontally. That was a chore for someone new to HTML!
I had everything nice and ordered .....it looked perfect!
When I hit the post button all my pictures were scrambled and text was scattered all over the place!
It took me several hours to rearrange things so that it was presentable to the public.
Do you know what I discovered?
The editor preview window isn't the same size as the posting window!!!
My code was okay, my image sizes were off!
I spent two hours resizing and testing and testing again before I finally to got things correct!
The pixel width of the posting window is 630 pixels wide! Exceed this and your project is ruined!
This is the code I worked out to display pictures three across.
<div class="pull-left">Image here
Image here
Image here</dev>
I used my preview software on my MacBook Pro to resize the images to 210 pixels wide. They should look like this in your blog.
The code will look something like this with your image files loaded. Be sure to strip out everything but the necessary elements of the image file, i.e. everything before the 'https' and delete the last parenthesis')' too.
<div class="pull-left">https://steemitimages.com/DQmdKzMxHYSy4qCnHrTybeBnkTPJjgWqUijYFz5xCeTQph4/IMG_1187.jpg
https://steemitimages.com/DQmdKzMxHYSy4qCnHrTybeBnkTPJjgWqUijYFz5xCeTQph4/IMG_1187.jpg
https://steemitimages.com/DQmdKzMxHYSy4qCnHrTybeBnkTPJjgWqUijYFz5xCeTQph4/IMG_1187.jpg</dev>
Use this code to align two different sized images!
The first image is 420 pixels wide and the second is 210 pixels wide. Together they are 630 pixels, the limit of the Post window.
This is the code I used for this effect.
<div class="pull-left">Image here
Image here
</dev>
I'm assuming you can align any number of images as long as they don't exceed the 630 pixel limit.
I've been toying with centering captions under each image but haven't had much success yet.
Update:
This will not appear correctly in a phone browser! I'm still working on that problem!
Helpful comments appreciated.
Thanks for reading!
CARRY ON!
