How to Set Shortcodes Ultimate Lightbox Height and Width

  • Resolved SimpsonLW

    (@simpsonlw)


    11 years ago

    How to Set Shortcodes Ultimate Lightbox Height and Width

    I am working on a site that uses HTML5 based tutorials for training. I would like to use the Shortcodes Ultimate Lightbox to show a tutorial as a Lightbox from a button on the tutorial post. I have everything working except the ability to set the height and width of the Lightbox. I need your advice on how to best accomplish that.

    Here’s a link to a page showing what I have now.

    https://pacommunity.azurewebsites.net/module-unassigned/what-is-a-process/

    There are three buttons on this page. The top two buttons open a tutorial in a new window. This gives you an idea of how the tutorials look by them self.

    The bottom button opens the tutorial in a Lightbox.

    The tutorials are all responsive HTML5. I would like to size the Lightbox to 1100 by 950 pixels wide, and have it be responsive if the browser size is smaller. As you can see, now the Lightbox is restricted to the width of the main page.

    Thanks for any advice on how best to achieve these goals.

    Larry

    https://www.ads-software.com/plugins/shortcodes-ultimate/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter SimpsonLW

    (@simpsonlw)

    I found the CSS to fix my issue.

    Hi Larry,

    I’m attempting to work with the size of the Shortcodes Ultimate lightbox as well, and am not having any success with adjusting it. My CSS attempts have led nowhere. If you could share the CSS magic that helped you adjust the size of the lightbox, that would be greatly appreciated!

    Jeff

    Hello Larry,

    I would also be interested in learning how you managed to fix your lightbox size issue.

    Thank you.

    Felix

    Hello jsandytn & coreevoyage

    After some research I found that following code need to be pasted in Shortcode Ultimate > Setting > Custom CSS > text edit area.

    .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
  width: 50%;
  background: #fff;
  padding: 25px;
  border-radius: 25px;
  cursor: auto; }

    You can see live demo here

    I have two Inquiry Button configured with contact form 7 and SC Ultimate

    Hope this help…

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to Set Shortcodes Ultimate Lightbox Height and Width’ is closed to new replies.