Your web page currently has an incorrect <title> tag (the opening <title> tag is missing its closing > character) and this might be having a knock-on effect with other tags/containers on your web page.
Change:
<title=SouthAmerica 2018</title>
... to:
<title>SouthAmerica 2018</title>
You can check your web page for HTML errors (and then fix any reported) with the W3C Markup Validation Service.
Once the code on your web page validates correctly, your web page should be rendered with greater predictability and consistency across different browsers.
Having said that, your gallery does seem to be responsive. If I decrease the width of my browser window, your gallery shrinks to fit within the new width (and the gallery images are scaled accordingly to avoid cropping).
Even though you say that you currently have a gallery height of 600px, your gallery currently uses:
If you would like your gallery to have a height of 600px, use the following instead:
I would still recommend that you use the Top Menu Example as a template. (Just remove the footer, replace the header content with your own custom navigation menu and swap the sample gallery for your own.)
Below is a single web page (with a header but no footer and no need for any external CSS files) which you can use as a template.
Just use code below as your gallery's 'index.html' file. All you really need to do is replace the content of the 'header' <div> with your own custom navigation menu and style it as you like via CSS. There is already some CSS for the 'header' <div> in the web page that you can modify (for example to change the header's height) if you like.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}
body {
background-color: #222222;
margin: 0px;
}
#header {
background-color: #222222;
color: #666666;
font-family: sans-serif;
font-size: 20px;
height: 50px;
padding: 10px 0px;
text-align: center;
width: 100%;
}
#wrap {
width: 100%;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jb;
function doLayout() {
var windowHeight = parseInt(window.innerHeight ? window.innerHeight : $(window).height(), 10);
var headerHeight = parseInt($('#header').outerHeight(true), 10);
var galleryHeight = windowHeight - headerHeight;
$('#wrap').height(galleryHeight);
if (jb) {
var galleryWidth = parseInt($('#wrap').innerWidth(), 10);
jb.setGallerySize(galleryWidth, galleryHeight);
}
}
$(document).ready(function() {
$(window).resize(doLayout);
jb = new juicebox({
containerId: "juicebox-container"
});
doLayout();
});
</script>
<title>Test</title>
</head>
<body>
<div id="header">
<span>Header</span>
</div>
<div id="wrap">
<div id="juicebox-container"></div>
</div>
</body>
</html>