Start a new topic

Galleries on Mobile Devices

My gallery looks great on the desktop view, but it switches to a single column (single image) at a time on mobile devices. I can't find the CSS code to change this so that I get at least 3 columns.


This is important because the purpose of the gallery is to see all/a lot of the images together to get a sense of the overall portfolio.


Does anyone have any suggestions? Thanks!


Hello,


Thank you for posting. I understand where you are coming from. However, imagine if you have 3 column of images in mobile. It will look cramped and will not look very presentable. The images were changed to a single column in mobile to make sure that your visitors will be able to see the images clearly even with a small screen. 


If you really want it to be displayed in 3 columns, we can try and do it via CSS but there's no guarantee. Let us know if you wish to proceed with this option. 


Arvin (Forum Moderator)

Thanks, Arvin! I understand it will look cramped. But that's ok-- the images are clickable for people to look at full size if needed. And the same images are displayed full size on the home page slideshow. This particular page I think is useful for the sole purpose of seeing the images together. I think a lot of viewers are also familiar with using Instagram, which has 3 columns as well.


It would be great if you could try to do this via CSS in a way that could scale up the number of columns depending on the size of the mobile screen, starting with 2 columns for a screen width <= 400px. I understand there is no guarantee, though.


Thanks a ton for the help.

Hi, 


I added CSS to make the images to be displayed in 3 columns for mobile. Please refresh your browser and check your site again.



Arvin (Forum Moderator)

Hi Arvin,


Thanks for looking into this. Hmmm... I see your css addition but not the effect. I refreshed the mobile browser and also the web browser, where I checked using the bottom left phone icon, but on both the gallery has stayed the same with a single column. Does it show up with 3 when you test it?


Thanks for your help!

Hello,


Yes, it is showing in 3 columns on my end. Maybe the code is not compatible to your browser. Can you make sure that you are not using any browser extensions such as adblock or any password filling features? Let me know if it still doesn't work for you and I'll try and fix it using a different code. But it won't be displayed in a similar way. 



Arvin (Forum Moderator)

Ah, I see what has happened. I should have specified the gallery page I had in mind, it's the page called Selected Projects where different projects are together (hence wanting to see them next to each other). Sorry about that! 


I have now modified your code like this: /*.horizontal*/ .Gallery to apply to Selected Projects. This has worked (thank you very much!!) except for two minor things--

1. the image shadow is having some issues it didn't have before (first picture) - is it possible to correct it or remove the shadow for mobile only?

2. the bottom-alignment for the images goes away when the mobile screen is wider (second pic) - is it possible to keep it bottom-aligned? If not, I understand.


Finally, how do I stop the 3 column adjustment from also applying to the horizontal gallery (the page type in your screenshot above)? Currently it's still applying to that page type.


Thanks again!

IMG2424.jpg
(302 KB)
IMG2423.jpg
(277 KB)

Hello,


No problem! 


1. I have removed the shadow for the mobile version.

2. I changed the code a bit and commented out the previous code to align it to bottom. If you don't like the changes, you can delete the new code and remove the comment for the old code for it to work again. In the new code, there's a line "align-items: end". If you don't like how it looks, you can change the value to start or center too. 


3. From what I understand, you don't want the gallery pages to be in 3 columns and just want the link page to be in 3 columns? I changed the code a bit here and just targeted the ID of the link page element so the other gallery page shouldn't be affected anymore. 


Have a great weekend! 



Arvin (Forum Moderator) 

Everything looks perfect. Thank you, Arvin!!

Login to post a comment