How can I make sure my lightbox is mobile-friendly?
Mobile browsing has become a part of everyday life. If you get a lot of mobile traffic, you might want to make a mobile friendly lightbox for your visitors. There are a few things to consider when creating a mobile friendly lightbox - the following steps will walk you through each.
Log into Digioh, and open an existing lightbox, or create a new one.
In the container tab of the layout section, adjust the size so the lightbox is 275 wide by 485 tall (or as close as you can get). You can make your lightbox a little bigger than this if you like, but this is the safe size we recommend.
The preview of the lightbox in the editor is actual size. If your mobile device and monitor are the same resolution, you can hold your phone up to the screen to get an idea of whether the lightbox will fit or not.
Be sure to save your lightbox!
If you want to show this lightbox only to mobile visitors, you'll need to create a rule, and a condition for your lightbox. Start by clicking on Rules in the top nav bar.
Click the Create a New Rule button
Select the Device Type rule property, give the new rule a name, and set it to phone/tablet.
Save your new rule, and then click on the Conditions tab.
Click the create a new condition button
If you want some general guidance for how to set up a condition, take a look at our tutorial on creating a condition. For the sake of this tutorial, we're going to focus on creating a mobile friendly condition. Create a condition that suits your needs, and add the mobile only rule you created to it.
Don't forget to save your new condition.
Head back to the lightboxes section, and select your mobile friendly lightbox. Click on Conditions on the left hand side.
Choose your new condition from the dropdown menu.
Finally, click the Save and Publish button to push your new mobile friendly lightbox to your live site.
That's all there is to it! You have created a mobile friendly lightbox!