How to make your embedded Photosnack slideshow responsive

Nowadays smartphones and tablets account for 60% of all online traffic. Add that to Google’s most recent update in which websites with mobile friendly versions got a ranking boost and it’s easy to understand how important it is that your website is fully responsive.

If you create your slideshow in Photosnack, we provide a responsive version of the embed code which you can easily implement on your website. First you need to retrieve the embed code for your slideshow, make sure you check the “Enable responsive embed code”

Next you need to implement the embed code on your website. You can wrap the iframe code we provide in a div and set the max-width and height for the div element. The code should look similar to this:

  • <div style=”max-width: 500px; height: 384px;”><iframe style=”border:none” src=”http://files.photosnack.com/iframejs/embed.html?hash=ptk3ep3j&t=1431591303″ width=”100%” height=”100%” allowfullscreen=”true” mozallowfullscreen=”true” webkitallowfullscreen=”true” ></iframe></div>

In case you want the slideshow to be full width, all you have to do is replace max-width: 500px with width: 100%.

And this is the result:

Leave a Reply

Your email address will not be published. Required fields are marked *