I’ve seen the multiple column work on a mobile if you remove the responsive action from your website. The big problem is, the image is so small, showing 2 or 3 columns of pictures is very hard to see. Here is a couple videos that that talk about this concept.
https://www.designbuildweb.co/responsive-column-layouts-elementor/
Thread Starter
toniem
(@toniem)
Thx for the answer! For columns I can control width in elementor for mobile – I know that. But there is no such settings for the gallery widget. In my opinion on my mobile phone, two or three columns in the gallery do look fine and better then having to scroll down for 30 images or more (http://666kb.com/i/dvort3b8mv4xhgemz.png).
I achived the view in the screenshot by using columns and adding just images, one by one – but that’s of course more work for adding additional images in the future and you loose the previous/next image feature of the lightbox. So if there’s probably a hack to disable responsive mode just for the gallery, I’d be very happy.
-
This reply was modified 7 years, 11 months ago by
toniem.
Thread Starter
toniem
(@toniem)
If anyone else needs similar functionality, this is how I solved my problem:
Add a html code widget and paste following code in it:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var onMobile = jQuery('#dummy_element_that_gets_hidden_on_mobile').is(":visible");
if (onMobile) {
// get the gallery id from the browser's dev tools and remove the gallery class (results in columns on mobile as defined in elementor)
jQuery('#gallery-2').removeClass("gallery");
}
});
</script>
If you want to change also the image size and column count, use following code:
// ...additionally reduce the column count from 5 to 3 and specify a different image size
jQuery('#gallery-2').removeClass("gallery gallery-columns-5 gallery-size-onepress-blog-small").addClass("gallery-columns-3 gallery-size-onepress-small");
Hi I have exactly the same problem. I want my galleries to be 2×2 in mobile view (WordPress Twenty Seventeen gallery does this automatically). Where do I put the HTML widget?
Thread Starter
toniem
(@toniem)
It doesn’t matter where exactly on the page you put the html widget – it won’t show content anyway as there is no content but only the script in it. It just needs to be on the page, where also the gallery widget is.
I actually made it work by adding a wordpress gallery widget in my Elementor page. this now shows a 2×2 gallery in mobile view. However the top two captions are slightly cutoff and it is not opening my simple lightbox I have when you click on the image.
Thread Starter
toniem
(@toniem)
Yeah that’s the reason why I “hacked” the elementor gallery – it provides all the features I wanted (lightbox, …).
Difficult to help with little information 😉 is the script+html widget not working?
the first part works but not the second part, that displays on my page. The lightbox is actually working with wordpress gallery widget, I use Simple Lightbox plugin. It’s now just the top two images caption that is slightly cutoff. Might be font size, I will check out my css
