Topic: Gallery not responsive on small screens

I have a Gallery Index page with two Juicebox galleries. I am using the Gallery Manager theme and have it embedded into an existing page using an iFrame. The iFrame was not responsive so I used this method, benmarshall dot me/responsive-iframes. Works well until I get to phone size. Completely falls apart. How do you suggest doing this? I would like to be able to replace several clients' SlideshowPro galleries using your product, but I can't get it to work. I've tried several ways to display this and nothing is working properly. I need to be able to have a gallery index and it needs to be embedded into an existing web page. These are galleries that have more than one, therefore they need an gallery index type page that ties into the rest in both directions. I want my clients to be able to edit their own images.

My test is here: drycreekdigital.com/portfolioShowkase dot html

Re: Gallery not responsive on small screens

I see the problem that you describe on mobile devices.
The problem seems to be with trying to insert your Showkase Gallery Index Page into a non-Showkase page.

If you view the Gallery Index Page on its own, it is responsive and looks fine on a mobile device.

It would be easy enough to embed a Juicebox gallery created by Showkase into a non-Showkase page (using the baseUrl method) but I don't think there's an easy way to insert an entire Gallery Index Page into a non Showkase page (and have it be responsive and look good in all browser viewport sizes).

The problem seems to be that your web page's layout truncates the height of your iframe on mobile devices.
(This would be the case no matter what content you load into the iframe.)

Your fluid layout looks quite complicated (there seems to be a lot of CSS code relating to it) so it would probably be quite a task to try to get it working well in all browser sizes.

However, here are a few suggestions which might help.

(1) Try using a regular iframe (without any fluid resizing) with a fixed height (rather than a percentage) suitable for the Showkase Gallery Index Page content.
You could maybe use a JavaScript routine to determine when a small screen device is being used and set a different height for the iframe under these conditions.

(2) When you select a gallery from the Gallery Index Page in the iframe, the gallery will still be contained in the iframe. (The iframe size will not change to reflect the change in content. Even if you sorted out the iframe for the Gallery Index Page, there might still be a problem with the gallery pages.)
You could perhaps create your own gallery index page. Some manual work would be required but including a couple of image links directly in your web page would do away with the need for an iframe completely.
For each gallery, you could create a separate page, using your own navigation menu and embedding the gallery using the baseUrl method. (The galleries would still be managed via the Showkase interface.)

(3) Another possible solution would be to use Showkase for your entire site (for your gallery and non-gallery pages).
The Kosel theme has a top menu (like you current site does) and Showkase supports non-gallery features like a contact form (which your current site has).
It might take a bit of work to port your site over to Showkase but it might ultimately be the best solution as all pages would be responsive and display well on mobile devices.

If you really want to include the Gallery Index Page in your non-Showkase page, then an iframe is the only way to do it (although Showkase was not really designed to be loaded into an iframe).
The Gallery Manager theme was designed to create full-screen gallery pages with no navigation to minimize style clashes with the rest of your site. Galleries can be linked to (on their own full-screen pages, with a Back Button to return to the original page) or embedded in existing pages alongside other content (like my second suggestion above).

Hopefully one of these suggestions will help.