Tagged: , , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • December 8, 2013 at 12:17 am #197471
    MM

    Hi guys,

    I’ve seen a few posts regarding this issue already, but none of the answers helped me. I’ve checked the forums at http://forums.no-margin-for-errors.com/ but can’t find what I need. When using inline content with prettyphoto the lightbox popup always shows as a fullwidth popup, regardless of the inline content. I need it to have a width of around 300px.

    I’ve searched the web looking for a solution but can’t find anything suitable. Surely there must be an easy way to make the lightbox a set width? (or better still the width to fit the content). The inline examples on no-margin-for-errors.com obviously don’t mention setting width and size and they appear to keep a default width that is around 500px.

    I can’t use the iframe option as the purpose of the lightbox is for a login form to an external site, so when using an iframe the subsequent logged in page is loaded in the iframe, which I don’t want. I’ve tried the ajax option which works but takes a while to load so is not really ideal.

    I’ve checked the prettyphoto js for the default width setting but can’t see it (my js has been minified though, so it’s difficult to spot anything!).

    Any ideas or pointers would be greatly appreciated.

    Thanks,

    Matt

    December 8, 2013 at 2:35 am #197542
    Josue

    Hi Matt,

    Can you post the link to your website please? Specifically the page where do you have these PrettyPhoto inline links.

    Regards,
    Josue

    December 8, 2013 at 3:17 am #197580
    MM
    This reply has been marked as private.
    December 8, 2013 at 8:35 am #197658
    Yigit

    Hey!

    Please try adding following code to Quick CSS in Enfold theme options under Styling tab

    div.pp_pic_holder { width: 300px!important; }
.pp_content { width: 275px!important; }
a.pp_close { right: 60%; }
div.pp_pic_holder { left: 40%!important; }

    It should look like this http://i.imgur.com/ksAn53N.jpg

    Cheers!
    Yigit

    December 8, 2013 at 9:43 am #197675
    MM
    This reply has been marked as private.
    December 8, 2013 at 10:52 pm #197802
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 767px) {
.pp_pic_holder.pp_default {
width: 40%!important;
left: 30%!important; }
div.pp_default div .pp_content { padding-left: 25px; }
.pp_content_container .pp_details {
float: none;} }

    Cheers!
    Yigit

    December 9, 2013 at 4:01 am #197878
    MM

    Thanks Yigit, it’s not exactly what I need but I will have a play with it and see if I can get it the way I want it. Ideally the lightbox would be big enough to properly contain all the form fields, the submit button and the forgot password link in smartphone portrait mode, because currently the lightbox is very small on smartphone portrait view and doesn’t show all of the content properly. I messed around with the percentages but then it breaks the lightbox apart between smartphone and tablet viewport sizes.

    Cheers,

    Matt

    December 9, 2013 at 5:13 am #197890
    Yigit

    Hey Matt!

    It seems like you have figured it out. This is how it looks on my end http://i.imgur.com/VVrix0Y.jpg

    Cheers!
    Yigit

    December 9, 2013 at 5:20 am #197895
    MM

    Hi Yigit,

    Yes I’ve sort of figured it out thanks. It looks OK on my iphone now but it may appear quite a bit off centre on smaller tablets or very large phones (as the ‘left’ property is still set to 10%). It’s not perfect but at least it looks better than it did. Thanks for all your help.

    Cheers,

    Matt

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Setting Prettyphoto lightbox width when using inline content’ is closed to new replies.