Title: Responsive widths Last modified: August 22, 2016 --- # Responsive widths * [allegrovivo](https://wordpress.org/support/users/allegrovivo/) * (@allegrovivo) * [11 years, 2 months ago](https://wordpress.org/support/topic/responsive-widths/) * Hi all, * Awesome plugin! * I find that at responsive widths, my box gets resized to a width that does not look good. I’ve tried manually changing widths but I cannot override what the plugin dynamically chooses. * I know I can change the Width setting under “Lightbox Plus Colorbox – Inlinebox Settings”, but that makes the box too big on desktop. * Thanks! * [https://wordpress.org/plugins/lightbox-plus/](https://wordpress.org/plugins/lightbox-plus/) Viewing 9 replies - 1 through 9 (of 9 total) * Thread Starter [allegrovivo](https://wordpress.org/support/users/allegrovivo/) * (@allegrovivo) * [11 years, 2 months ago](https://wordpress.org/support/topic/responsive-widths/#post-5815950) * Bump (is it okay to bump topics?) * Thread Starter [allegrovivo](https://wordpress.org/support/users/allegrovivo/) * (@allegrovivo) * [11 years, 2 months ago](https://wordpress.org/support/topic/responsive-widths/#post-5816013) * Hello? * [asterbird](https://wordpress.org/support/users/asterbird/) * (@asterbird) * [11 years, 1 month ago](https://wordpress.org/support/topic/responsive-widths/#post-5816069) * Hi allegrovivo, * My box doesn’t get resized at all. So I created some styles that make it responsive. Here is some CSS I used for my project. Maybe it can help you. * #colorbox:focus { /* hides annoying blue focus outline */ outline: none; } * #cboxContent { font: 20px “Helvetica Neue”,Helvetica,Arial,sans-serif !important;} * #cboxClose { /* puts Close X inside popup so it doesn’t disappear on mobile */ top: -10px !important; right: -6px !important; } * div#cboxTitle { padding: 7px 140px 0 15px; } * div#cboxCurrent { bottom: -31px; } * [@media](https://wordpress.org/support/users/media/) only screen and (max-width: 1030px) { #colorbox, #cboxTopCenter, #cboxBottomCenter { max-width: 99% !important;} * img.cboxPhoto { max-width: 100% !important; height: auto !important; } * #cboxWrapper { max-width: 100% !important; } * #cboxContent { max-width: 98% !important; } * #cboxLoadedContent { max-width: 100% !important; height: auto !important; background: transparent; } * div#cboxTitle { padding: 7px 140px 0 15px; } } * [Microcap](https://wordpress.org/support/users/microcap/) * (@microcap) * [11 years ago](https://wordpress.org/support/topic/responsive-widths/#post-5816111) * Hi Asterbird, Where do you paste in the CSS you wrote above? I went into the plugin directory, and there are dozens of folders in the CSS directory for this plugin. Or should this go into the main style.css folder for wordpress at the bottom of the file…. Not sure where this should go…..thanks… * [asterbird](https://wordpress.org/support/users/asterbird/) * (@asterbird) * [11 years ago](https://wordpress.org/support/topic/responsive-widths/#post-5816112) * It should go in your theme’s style.css, as in wp-content/themes/your-active-theme- name/style.css * Does that make sense? * [Microcap](https://wordpress.org/support/users/microcap/) * (@microcap) * [11 years ago](https://wordpress.org/support/topic/responsive-widths/#post-5816113) * Yes, that makes perfect sense, so the main style.css, and I assume you paste in it to the bottom of the file. One problem I had with the lightbox was that on a mobile phone, the text caption that you put for the pop-up image was obscuring the image itself. (This is if you had a lot of text describing the image). Does this CSS solve that problem? * This was really apparent on smartphones in portrait mode. * I am using a separate mobile theme with its own style.css in it. Since its only mobile phones that I am having the problem with, I will paste it in the mobile theme css, although you did mention that the blue focus line is solved with this in desktop mode too. * Thanks! * [Microcap](https://wordpress.org/support/users/microcap/) * (@microcap) * [11 years ago](https://wordpress.org/support/topic/responsive-widths/#post-5816114) * asterbird, just tested it out using a mobile emulator, and works great! Thanks…. I still have the problem of the text bleeding into the image if the title is too long. Looks fine on a desktop with full image, but a problem with the smaller image. Don’t really want to change them all just to suit mobile, is there anything we can do to give more room for the text? * [asterbird](https://wordpress.org/support/users/asterbird/) * (@asterbird) * [11 years ago](https://wordpress.org/support/topic/responsive-widths/#post-5816115) * Possibly. Can you give me a url and what mobile device do you see the text bleeding on? * [Microcap](https://wordpress.org/support/users/microcap/) * (@microcap) * [11 years ago](https://wordpress.org/support/topic/responsive-widths/#post-5816116) * I reinstalled the lightbox and now the text is showing white text below the image in a black area. The lightbox itself is black with the image on it with the text in big print under the image. The only problem is that the text is far away from the image like 200px below it…. unless that was your design… * But overall I like it, and will allow you to use this on mobile devices without modifying anything. Viewing 9 replies - 1 through 9 (of 9 total) The topic ‘Responsive widths’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/lightbox-plus_fafafa.svg) * [Lightbox Plus Colorbox](https://wordpress.org/plugins/lightbox-plus/) * [Frequently Asked Questions](https://wordpress.org/plugins/lightbox-plus/#faq) * [Support Threads](https://wordpress.org/support/plugin/lightbox-plus/) * [Active Topics](https://wordpress.org/support/plugin/lightbox-plus/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/lightbox-plus/unresolved/) * [Reviews](https://wordpress.org/support/plugin/lightbox-plus/reviews/) * 9 replies * 3 participants * Last reply from: [Microcap](https://wordpress.org/support/users/microcap/) * Last activity: [11 years ago](https://wordpress.org/support/topic/responsive-widths/#post-5816116) * Status: not resolved