Side by side images on 4th viewport (mobile phone) 
Author: Dimitrios S.
Visited 968,
Followers 1,
Shared 0
i have 8 images in the same line, side by side (and only them, nothing else). On the 1st, 2nd and 3rd viewport, in the Preview, they are in the same row. But when i Preview the 4th viewport, they are one under the other. How can i see them in the same row on the 4th viewport WITHOUT putting them into a Gallery?
Thank you!
Posted on the
Good morning, Dimitrios.
Sometime, ‘Line breaks’ & ‘Display Order’ can resolve these display issues. You can find these settings via Step 4 > Responsive.
I hope that this works for you!
Author
Hello Andy, thank you for your message. It doesn't resolve the problem, Responsive shows them one under the other. Only thing that worked partially was changing the Responsive settings (step 2 , 4th viewport 320px) but that messes with all the rest and of course, viewports under 320px bring the same result.
Any other solutions?
Thank you!
Because you do not wish to use a gallery (of sorts) and I assume that you want to keep the site ‘responsive’, then the only other thing that comes to mind is changing the image sizes to fit the smallest output (320px). I am unsure how this will scale up though.
Let us know how you get on please? Maybe someone else might have a better solution.
Good luck, Dimitrios.
Hi Dimitrio, I think that is by design. Depending from the original size of the images, under the 320px viewport with 8 images in a line, each has only a 40px width. You need a microskop to see something on a smartphone. Try to put them side by side in a full line text object.
Author
Thank you both Andy and Martin
Andy: Yes, that is what I thought and expressed also.
Martin: I will try that, I generally avoid it because sometimes it "crashes" the site or uploads a different image etc, plus it doesn't give you ability to "highlight" on MOUSEOVER or have other "image" properties and effects
P.S. even if there are 2 images (instead of 8), the problem remains. I understand that it may be "by design"but mobile phones nowdays can easily fit 2 pics in the same row
Thank you again guys
If you are sure that Line breaks can’t work for you, how about doing away with responsive-mode and configure the website to desktop-mode (Step 2 > Resolutions & Responsive Design)?
Author
Thank you for the suggestion. I tried it but it doesn't look nice. I actually create the website with primary focus on mobiles (more scroll down than clicks), so the whole structure is like that
I understand, Dimitrios.
If you are confident about modern phone resolutions, then you could be less concerned about the lowest resolutions, which are for older/cheaper handsets.
I will continue to watch this thread in the hope that we can both learn something new ;o)
I am sorry I was unable to provide a quick solution for you.
All the best!
Andy.
Author
Thank you for your time Andy!
I ll tell you how I "resolved" it. Since side by side (thin) vertical images is not possible in the 4th viewport, I used other images so they are one under the other (thin horizontal images).
Being creative is what is all about in the end
In the lowest viewpoint only one column is shown.
In the PRO version you can create more viewpoints.
You could create a 5. viewpoint that act as a dummy-viewpoint. Set it to a very small size that will never be relevant.
This way the 4. viewpoint can have more columns.
Hi John, the idea isn't bad, but I have five viewpoints in the porject and it seems that under 720px the ports will have one column only.
If the viewports above actual viewport has "breaks" then the viewports below cannot "unbreak".
I do not not have the newest version installed yet, but in older versions it was only the last viewport that could not have more columns. But maybe that has changed.
Sorry my fault. You are right! This way it could work.
Author
Interesting idea! Thank you (once again) John!