Responsive widths

Bump (is it okay to bump topics?)

Hello?

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 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;
}
}

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…

It should go in your theme’s style.css, as in wp-content/themes/your-active-theme-name/style.css

Does that make sense?

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!

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?

Possibly. Can you give me a url and what mobile device do you see the text bleeding on?

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.