I am using an iFrame Colorbox (/) and I need to make it "responsive". Right now I have set the width to 90% and it works but after a certain size I do not want it to expand anymore, regardless of screen size. I want to set the max width to 1200px.

How can I do this?

I am using an iFrame Colorbox (http://jacklmoore./colorbox/) and I need to make it "responsive". Right now I have set the width to 90% and it works but after a certain size I do not want it to expand anymore, regardless of screen size. I want to set the max width to 1200px.

How can I do this?

• javascript
• colorbox

2 Answers 2

Have you tried the maxWidth property? You use it in conjunction with the width property in order to set a max size. Example: $('a.example').colorbox({width:'90%', maxWidth:1200});

I just did something like this... below is for iPhone/Android. Needs some tweaking depending on content but it's a start for ya'll.

@media screen and (max-width: 480px), (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min--moz-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
#colorbox, #cboxWrapper, #cboxContent { width:320px !important; }
}