Responsive is here!

Finally Responsive Is Here!


For a long time now I been asked by lots of users of Visual Slide Box Builder for responsive capability.Unfortunately, this wasn’t an easy problem to solve, due to the complexity of the slide boxes and all the customization it makes it hard to be responsive. But the most challenging this was that the dimensions where fixed. For all slide boxes you would have to provide a fixed width and height, which can be very useful but also hard to make responsive. If teh height and width are fixed making the slide box responsive is hard because if we reduce one the other one must also be reduced, else the ration would be broken and the box would not like nothing like it did on the preview. Fortunately I was able to overcome this using percentages for the width and preserving the ratio using javascript. But enough with the technicalities, all you care is that your boxes will be responsive!

Creating Responsive Slide Boxes

So how does this responsive pack work? It is very simple actually. When you purchase the Responsive Pack ($7.00 small price for great functionality) you will have the ability to pick a layout for your boxes. The layout could be one of the followings:

  1. Fixed – non responsive
  2. Inside a <div>
  3. 4
  4. 3
  5. 2

It is kind of self explanatory if you have worked with grid systems before. If not, don’t worry it is a very simple concept. The number (4,3,2) is the amount of boxes you can place side by side on a row. Using this numbers all the css is already done for you. If you are not satisfied with the options, you can wrap the shor-tcode inside a custom div that you control the width, using the Inside a <div> option. This will make the box adapt to the div. So you can create your own layouts such as 3/4 of thh page, whole page etc..

The responsive feature works great, you can actually see it in action here in the home page. Try it for yourself, resize the page and see how the boxes resize automatically. As you play with the boxes you might notice that they resize perfectly, but the ones that have text inside kind of look off when the screen is too small, since the text does not changes size. This is the prevailing that is almost impossible to fix. However there is a workaround for this!

The Problem & The Solution

So text that does not resize is a problem for some boxes that don’t just have images. If the screen size is reduced by a lot, the text might not even show. The best work around for this is to make the text an image, so it can resize automatically.

Making your text and image is actually pretty simple, all you will need is some image editor program where you can build images. I preferred PhotoShop, but you don’t need all of PhotoShop just to make a text image and image editor program that you like would do just fine.

Note: Simply installing the responsive pack will not make your existing boxes responsive. You must edit your existing boxes and select a layout option.

Make your boxes responsive today!

Profile photo of Enmanuel Corvo

Enmanuel Corvo

Software Engineer at LiveAnswer, Inc.
Enmanuel Corvo is a passioned software engineer who enjoys contributing to the web community by creating plugins, blog post and providing technical help to those who need it.
Profile photo of Enmanuel Corvo

Latest posts by Enmanuel Corvo (see all)

Posted in Uncategorized.

Leave a Reply