How to make the lightpox responsive?

Hi there!

Ultimately, I won’t make an advent calendar this year, but I had this installed and I wanted to do the same as you, so I added this to my CSS:

#colorbox{
overflow:visible!important;
margin:auto!important;
left:50%!important;
width:50%!important;
height:initial!important;
}

#cboxWrapper{
left: -50%!important;
}

#cboxTopCenter,#cboxTopRight,#cboxMiddleLeft,#cboxMiddleRight,#cboxBottomLeft,#cboxBottomCenter,#cboxBottomRight,#cboxTopLeft{
display:none!important;
}

#cboxWrapper,#cboxContent,#cboxLoadedContent,#cboxLoadedContent > .wp-caption{
width:initial!important;
height:initial!important;
}

#cboxContent{
padding:5px!important;
border-radius:7px!important;
}

The padding can be changed in #cboxContent. I hope this is what you’re looking for.

@retsamys thanks for your work.

By default, colorbox (the lightbox) is not responsive in the version we are using. I’ve made an note to update the lightbox soon.