Center (horizontal) a lot of images on a page 
Author: Ruud Roefs-WijnenI am using X5 V13. My website is still in a test evironment www.fawltyandjones.com/test
On most pages I want to be the information in the center (horizontal) of the page. Mostly this is no problem. Take a look at this page http://www.fawltyandjones.com/test/m-nest.html. Here everything is okay.
But now take a look at this one http://www.fawltyandjones.com/test/g-nest.html. I can not seem to manage that the images of the puppies are centered correctly (horizontal) on the page. Because I use 10 columns, the 4 bitches is of course no problem. But what do I have to do, for getting the 5 dogs to be centered (horizontal) on the page?
The page exists of 10 columns, because I need the above images and the text to be centered also.
Of course I could double the number of columns, and then use for each image 2 cells. Then it is possible. But the images are so small, that the room between two images will be far too big. And this works only with 9 puppies, not with a litter of 12 puppies (7 bitches and 5 dogs) http://www.fawltyandjones.com/test/i-nest.html. I do not want to make the images bigger, I want them on each litter-page the same size.
Is there a way to center (horizontal) an uneven number of filled cells on the page, so that the images stay as close to each other as they are now?
Dear Ruud,
thank you for your e-mail.
I kindly suggest you to adopt the solution you have mentioned at the end of your message and then to reduce the margins so to reduce the space between the images as well. To achieve that, you have to select the cell you are working on and click on
, to open the Object Style window.
Please let me know if it works. Kind regards.
Author
Thank you for your response. But unfortunately this does not work. I already tried that. Even if I put the margins on 0, the spaces between the images are far too big. Attached a print screen of a test.
And also there is a maximum of 12 columns, so this is not possible for most of the pages.
The problem is that on some pages I have a row with an even number of images and a row with an uneven number of images. And that makes it impossible to center them.
With the 2 images on top of the page (the parents) it is no problem to play with the size. But I want to have the images of the puppies, on the bottom of the page, a lot smaller.
Hello again Ruud, have you considered using tables with x columns and either one or 2 rows.
Each table should centre on the page.
You can turn off the lines that define the table and with careful sizing of each cell in the table you can achieve what you require.
The example I have provided was not created with any care, but you should see that various numbers of images (with text) can be centred across a page.
PS - you would use one table for each row of pictures to achieve what you require.
Author
Thank you very much Esahc! That could be a great idea. I will try if that works for me and let you know! Thanks!!!
Author
Well Esahc, this works for centering the pictures. But unfortunately, now I loose the option for letting visitors know that there is a link on each picture. And a great disadvantage appears on the mobile devices. When you use one (or two) cells for each picture, the pictures will be shown below eachother. But when I put them all in a table, then only part of the table is shown.
So I guess I have to try some more and see what else I can find.
But thanks anyway for your suggestion!
Ruud, if the layout in desktop view is so important to you, you could upgrade to PRO and have a separate desktop site and responsive site for mobiles and tablets.
This would automatically happen through the entrance screen and provide the option for the user to view either the desktop version or the responsive version if you wish.
Author
Hi Esahc. Thank you for the info. I did not know that this is possible in PRO. I will reconsider that.
In the meantime I tried a few things. Also related to the other problem I have with the size of all the images (columns)https://helpcenter.websitex5.com/en/post/166048
I made a test page with (as you suggested earlier) tables, http://www.fawltyandjones.com/test/test-tabel.html Each tables consist of max 4 puppies (images). So that most visitors will see all the heads, and not part of the tabel.
It looks okay in Edge, I.E., Chrome and Safari. Also on my IPad and IPhone it looks acceptable. But how can I check if this looks okay in other browsers and on other mobile devices? Maybe you use another browser...
Via this way I could get around both problems, I guess.
Ruud, the only mainstream browser you seem to be missing is firefox (freely available).
It looks great on my Android mobile, but you may wish to reduce the width for mobile resolution to about 380px (see attached screen shot). Is the right side cropped on an iphone?
Author
Hi Esahc. Thanks for the screenshot. Nnd yes, on my IPhone the right side is cropped. But most people, who want to see more of the puppies, will turn the screen a quarter. And then all the 4 heads are visible. So for me that is acceptable.
But I could consider to change the resolution. Thanks very much!