Setting modal sizes for Magnific popup

Question

Using the css, the js, and the html right out of the box, I'm very pleased with the way Magnific Popup works. The initial size of the modal (roughly 900 X 500px) is fine at full screen but on reduced screens, the responsive behaviour of this plug brings the modal height down far too much and forces a visitor to scroll like the dickens.

I would like to keep all settings except that I'd like to have a taller popup when the screen is, say, less than 600px wide.

I've tried the suggestions at jQuery magnific-popup : open 2 popup iframe with differents width/height, but adding the markup to my initialization js simply breaks the script.

I know very little about javascript, so I appreciate any suggestions.

Answer 1

You can do this in CSS using a media query. (http://www.w3schools.com/cssref/css3_pr_mediaquery.asp)

@media screen and (max-width: 600px) {
   .mfp-content {
     height: 600px; // or whatever
   }
}

I'm not 100% sure which mfp class you will want to edit, but if you can play around with it and find out. I would recommend using Chrome's device simulator for testing mobile screens.