The “HybridConnect” plugin advertises itself as being responsive, but for some reason, only the embedded forms are responsive and the lightbox is not. In fact, it is so NOT mobile friendly that when we enabled the plugin is was completely blocking mobile users from accessing a site!
This is important, because while some users find these popups frustrating, they had the highest signup rate of any form on the site (even when only desktop users could use them!). But of course, we can’t block mobile users from using the site.
So, to help them get as many email signups as possible, we took a look to see if there was an easy way to make the lightbox responsive… and voila! Less than three hours later, we have a fully mobile response lightbox inside HybridConnect.
Here’s how it looks once made responsive:
Here is the code you can use to do the same:
Just add these few lines of CSS code in the hybridconnect file “templates/lightbox.php”
/* Smartphones (portrait) ----------- */ @media only screen and ( max-width : 620px) { #hc_shortcode_form { width:400px !important; padding-bottom:50px !important;} .optinWrapper { height:115px !important;} } @media only screen and ( max-width : 500px) { #hc_shortcode_form { width:320px !important; padding-bottom:50px !important;} .optinWrapper { height:115px !important;} .hc_template_lightbox_popup .lightbox-close { margin-top:-30px !important; margin-right:0px !important; } }
Enjoy!