... i see text that says "3 images VIEW GALLERY".
What you are describing is the Splash Page.
The Splash Page is a placeholder for the gallery which is displayed by default on small screen devices when the gallery is embedded in a page alongside other content (rather than displayed on a page of its own with dimensions of 100% x 100%, filling the browser window).
When the user clicks/taps the Splash Page, the gallery is expanded to fill the user's browser window.
For more information about the Splash Page and how Juicebox adapts to different devices and screen sizes, please see here.
You can choose to not use the Splash Page by setting showSplashPage="NEVER".
Alternatively, you can force the gallery to be displayed in Large Screen Mode (which, by default, does not use the Splash Page) on all devices and in all browsers by setting screenMode="LARGE".
If you choose to continue to use the Splash Page, you can customize it using the Splash Page configuration options.
... when using a mobile device via the inspector...
A browser's developer tools can be very useful but they are not always the most accurate way to emulate a mobile device and determine how a gallery will look on such a device. (Just something to bear in mind when testing your page's layout.)
there is a huge height gap under the main image which pushes the other content below it all the way down the page.
Please see this FAQ:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?
... if I set the width to 100% and the height to 100%...
Please see this note regarding Using Percentage Heights.
So I'm finding that if I set the width to 100% and the height to 100%, when on mobile, the image is width enough to fit well, but the height is huge on a mobile device.
When setting a percentage height, make sure that all parent containers of your gallery have heights set via CSS. Otherwise, Juicebox may not be able to determine what its actual height should be. For example, if you set a gallery height of 100%, Juicebox needs to know what its height should be 100% of. In a CMS environment (such as Drupal) where you may have little or no control over the containers that the gallery is nested within, it might be wise to use a fixed pixel height (such as '600px') instead of a percentage to avoid problems that can arise when using a percentage.
If your current theme does not already so so, you could try scaling your web page for mobile devices but adding the following tag to the head section of your web page. This might help.
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
... when I added the autoplay on, it starts with autoplay but if i click on a thumbnail, autoplay gets turned off of course, but there is no way to turn it back on is there?
Set showAutoPlayButton="TRUE" and the AutoPlay Button will de displayed in the Button Bar and the user can click/tap this to toggle AutoPlay on and off.
I hope this information helps.