Time for action – setting a fixed size

Follow these steps to set a fixed width and height for the Colorbox:

1. Open up your scripts.js file. We're going to make a few changes to our code to set a fixed width and height for the Colorbox:

   $('a[rel="ireland"]').colorbox({
     transition: 'none',
     width: '90%',
     height: '70%'
   });

2. Now, if you refresh the page in the browser window, you'll see that the Colorbox remains the same size. No matter what size the images or the browser window is, Colorbox will always fill 90 percent of the width and 70 percent of the height of the browser window. The images inside resize proportionally to fit into the available space if they are too large.

3. You can set a fixed width and height in pixels or percentages. Percentage height and width are useful in responsive designs. You can be sure that your site visitor will see the entire image, no matter what size their screen happens to be.

What just happened?

We set the width and height settings to percentage values. This...