CODEWITHSUNDEEP
javascriptjquerycssprettyphoto
max
max

Reputation: 331

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?

Upvotes: 1

Views: 1919

Answers (1)

GL.awog
GL.awog

Reputation: 1322

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;

    }
}

Upvotes: 3

Related Questions