max max - 4 years ago 516
Javascript Question

jQuery prettyPhoto mobile issue

I'm currently using prettyPhoto on a project that i'm working on. Issue is on the mobile its not displaying full screen. So i found a solution and apply it. But now the videos wont fit to the window.

Css Fix

/* prettyPhoto styling for small screens */
@media (max-width: 500px)
{
.pp_pic_holder.pp_default
{
width: 100%!important;
margin-top:-100px !important;
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
{
box-sizing: border-box;
width: 100%!important;
padding-left: 3%;
padding-right: 4%;
padding-top: 10px;
padding-bottom: 10px;
background-color: #fff;
margin-top: -2px!important;
}
a.pp_close
{
right: 10px!important;
top: 10px!important;
}
}


jQuery prettyphoto plugin
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/


This work fine on photos. but when load a video such as YouTube or Vimeo, the video is very smaller then the window that opens up. How can i fix this issue?

Answer Source

Add a media query for videos as well:

@media (max-width: 500px) {
   .pp_pic_holder iframe,
    .pp_pic_holder object,
    .pp_pic_holder embed {
         width:100% !important;

    }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download