Gallery on mobile

Hi,

On mobile that part of tagdiv gallery is hidden. You can try to use this custom css, but it may not be displayed properly as it was not designed to appear on mobile screens: http://screencast.com/t/3ybkcNr2To

.td-doubleSlider-2 {
display: block;
}

Thanks!

Hi,

You can use this custom css to fix that issue on smaller mobile screens: http://screencast.com/t/KOD1Y0b4

@media (max-width: 480px){
.post_td_gallery .td-doubleSlider-2 {
padding: 20px 0px 10px 0px;
height: auto !important;
}
.td-doubleSlider-2 {
display: block !important;
}
.td-doubleSlider-2.td_center_slide2 .td-button {
top: 0px;
}
}

Thanks

Hi,

If you check our demo and set the gallery second slide from hide to be shown you’ll noticed the gallery slide which uses an animation to to slide and stays on one line: http://screencast.com/t/wP4RoKrEjtG
This is the post: http://demo.tagdiv.com/newsmag/td-post-this-is-the-recipe-for-a-perfect-vacation-apparently/

In your case this animation is missing that’s why the images from your second slide fall into a second row.
I suggest you remove the changes you’ve made to theme’s files/code and test this again using just the custom css to set the second gallery slide to display: block
Let me know how it goes.

Thansk

Hi,

After better testing this I’ve noticed that actually this happens when using less images. The gallery second slide hasn’t been designed to work on small screen widths, that is why it also has been hidden on mobiles, so if using few images on small screen widths the slide animations isn’t needed so to use the animation and prevent this you could use more images or use another approach on this and get someone to help you adjust it as you like.

Thanks

Hi,

Please try to add min-height to the code that Lucian provided to you: http://screencast.com/t/2X20UpDh

@media (max-width: 480px){
.post_td_gallery .td-doubleSlider-2 {
min-height: 80px;
}
}

Thanks!

Hi,

Yes, you have to add more images to the gallery!

Thanks