Image gallery mobile (VC) [prettyPhoto/popup size on mobile]

kalleson

I've added a photo gallery of the article (Image Gallery settings: On click action Pretty Photo action, Gallery Type: image Grid). Gallery works well for desktop and tablet use, but not mobile phones. When I open a picture phone then it is too small. Can I adjust the image size from one? I want Fullsize when using a mobile. Where can I change the size?

Albert

Hi,

we are really sorry but it is unfortunately impossible to increase popup size on mobile devices at this moment.

Thanks for understanding!

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

kalleson

Hi,

I've been looking for a solution the problem, and I found the following code that works. You can make it available also for those who have the same problem.

This is code that work:

/* prettyPhoto styling for small screens  - below 767px width */

@media only screen and (max-width: 767px) {

.pp_pic_holder.pp_default { width: 90%!important; margin-left:5%; left: 0!important; overflow: hidden; }

div.pp_default .pp_content_container .pp_left { padding-left: 0!important; }

div.pp_default .pp_content_container .pp_right { padding-right: 0!important; }

.pp_content { width: 100%!important; height: auto!important; }

.pp_fade { width: 100%!important; height: 100%!important; }

a.pp_expand, a.pp_contract, .pp_hoverContainer, .pp_gallery, .pp_top, .pp_bottom { display: none!important; }

#pp_full_res img { width: 100%!important; height: auto!important; }

.pp_details { width: 94%!important; padding-left: 3%; padding-right: 4%; padding-top: 20px; padding-bottom: 20px; background-color: #fff; margin-top: -2px!important; }

a.pp_close { right: 10px!important; top: 10px!important; }

}

Albert

Ok. Thanks for this part of the code. We'll have a look on it closer while future updates.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next