Can Colorbox be made responsive for mobile?

davidzupecdavidzupec Member
in Help edited May 2014
Hello, Is there a way to make Colorbox responsive so that it can be viewed on mobile devices without scrolling horizontally?

Thank you!
  • fc_adamfc_adam FoxyCart Team

    You have a couple options. One thing you could do is use some javascript to dynamically change the width that the colorbox loads with depending on the browser size. If you look inside the foxycart.colorbox.js file, you'll see it checks for a 'colorbox_width' and 'colorbox_height' variable before setting a default width and height. If you set two variables on the page before the foxycart.colorbox.js include for those two variable names, and set the width and height according to the browser viewport, that would be a quick way to make that work.

    Another approach you could take is replace the colorbox library we use out of the box with a newer version that is responsive - but take into account I'm pretty sure they dropped some older browsers - which may not be an issue for you but something to consider.

    Finally, an approach some stores have taken is to check the viewport size, and either load the colorbox as normal, or load the cart as a full page cart.

    For what it's worth, and we mention it a lot, but our upcoming 2.0 release will include responsive templates out of the box, and we're also including a new cart approach that is fully responsive as well.
  • Hi Adam, great thank you, I'll take a look at these options. Yeah I definitely can't wait for the 2.0 release. Foxycart is the only cart system I use for my client sites! : )
Sign In or Register to comment.