The gallery width is not adjusting and is not responsive - Justified Image Grid

While JIG itself is responsive, your theme might not be. You need a responsive theme to allow resizing JIG on the fly. If your desired content area is a fixed width container or has certain minimum or maximum CSS width limits then JIG can not cross those.

If you believe your theme is responsive, but still the JIG instance is too wide or too narrow, then check the fix for: The element is invisible or too thin; or the grid seems off and misaligned.

When the gallery does not appear narrow enough, make sure you don't have Fixed: Non-responsive selected for JIG settings > General tab > Width mode setting. Also, some themes align the content with JS, after page loading. Check the above link for the fix.

In case the gallery is not wide enough as in not a full width gallery... Most themes have a "full width" page template Edit Page > Page Attributes box > Template dropdown, but it often just means no sidebars. The page would still be limited to ~960px width. Add a few lines of text to the content area then observe that it also cannot extend to the true width of the screen. In this case it's a theme limitation.

Unless your theme offers a 100% full width option, you need to lift the width restrictions imposed by CSS. With browser developer tools, find the main container for your content, which has a max-width CSS property. Then add something like this to JIG settings > General tab > Custom CSS setting:

.page-id-1234 #content{
    max-width: none !important;
}

.page-id-1234 #content{

max-width: none !important;

}

With the page-id you can limit it to just to the exact page that contains JIG, and not have the rest of the site converted to real full width. The #content would be changed to the element you found with the max-width property set.

When using JIG with tabs, most solutions work well. However, in some cases you might want to manually refresh the width of JIG instances, or simply tell them to resize on demand. Add this to JIG settings > General tab > Custom JS and change .tabContainer and .singleTab to your own element classes.

jQuery('.tabContainer').on('click','.singleTab',function(){
    var jigs = jQuery('.justified-image-grid');
    if(jigs.length !== 0){
        jigs.data('justifiedImageGrid').createGallery('resize');
    }
});

jQuery('.tabContainer').on('click','.singleTab',function(){

var jigs = jQuery('.justified-image-grid');

if(jigs.length !== 0){

jigs.data('justifiedImageGrid').createGallery('resize');

}

});