Side by side images issue

You have to think about it in terms of “What size is the screen that the visitor is using to view your page?”
All content should be able to be seen similarly regardless of the screen size. The theme handles this for you for the major parts of the page (header, sidebar, footer), but the content itself is up to you.
So, do you want a small screen to see smaller images, still centered?
Or same size images but stacked?
And are you centering the 3 or each one?
You will have to adjust some CSS to make it different for different sized screens.

Hi Joy, I want the 3 images to show up side by side on all devices. Right now, the images are on the left one on top of the other on my Mac, my iPad and my iPhone. Yet in the editor, it is nicely centered and side by side. You can see a screenshot here: https://ooodlesofdoodles.com/wordpress/wp-content/uploads/2018/10/Screen-Shot-2018-10-22-at-3.21.55-PM.png

Hi @gdzilva,

Adding this to your custom CSS should fix that page:

.alignnone {
display: inline-block;
}

Appearance -> Customizer -> Additional CSS

If you find it’s negatively affecting your other pages you can modify it to:

.page-id-79 .alignnone {
display: inline-block;
}

@gdsilva actually you can do it w/o any code it can be done trough the editor with your mouse but it’s a little tricky (to have 3 images side by side all centered), I’ll describe it from scratch (suppose you have a new page)

1. Click “Add media”, add the 3 images. By default they don’t have an alignment (when you click an image in the page editor, some icons appear and the 4th is “No alignment” and it is selected by defaul). If you would like to correct your page not starting from the beginning, just make sure you change the alignment icon for the 3 images to “No alignment”.

2. The secret (w/o this you can’t get the wanted result) – add some random text before the 3 images AND after them, you can add a single letter “a”.

3. Mark (select) everything with the mouse (the text at both sited and the 3 images) and click the text center icon in the icon bar in the editor tab (or press Shift+Alt+C). If you didn’t add some text this action would center the images (their align icons would change to “Align center” instead the default), something that is not wanted. BUT with the trick above, the text and images will get centered in a single line.

4. Now fix back the trick – just remove the text in the beginning and the end. As a result you will have the 3 images side by side and at the same time centered as a whole.

Note that this will result in a responsive layout – if you shrink the screen and there isn’t enough space the images will split and go to the next line if needed still centered.

Thanks for this @dannycooper. It didn’t change anything. I’m no longer going with three pictures side by side but I’ve tried it with two pictures side by side, it worked on my Mac display but not on my iPad.

Thanks @dingdang for taking the time to write this down for me. I’ve seen a similar solution before. I tried as per your instructions. That still didn’t work as I would have hope. I think I need to display smaller pictures. Thanks again. I’ll find a work around somehow.