Hi Chris

Our GridGallery module does include some options to edit the width of your images on various screensizes. Unfortunately we can not change the width of the images fluidly without the use of the CSS property flex which is not fully supported on all browsers.

Ciarán

Thanks for the answer, ciaran!

I have again examined the differences to their website.
Your Demo-Website always has a fixed width while minimizing the Browser (960px, 768px, 580px,320px)
This is optimal because the Grid Gallery always has the perfect width.
My site has no fixed width, it's completely "flex"
perhaps it is the wrapper960(responsive.css)?

Chris

Hi Chris

The demo uses a slightly older version of the template. It was a common request for a more fluid width across all mobile devices which is why these changes were made. To revert to the older version of the responsive CSS you can replace the contents of your templates responsive.css with the following (../templates/j51_polaris/css/responsive.css).

img {max-width: 100% ;} 





/* #Tablet (Landscape)

================================================== */



@media only screen and (min-width: 960px) and (max-width: 1024px) {



.wrapper960, #header, #logo, .hornavmenu, .content_background {width:960px !important;}

.content_background {

	margin: 0 auto;

}

.logo_container, h1.logo, h1.logo a {width:820px !important;}



/* Hide default hornav menu */

#hornav {display:none !important;}

/* Show mobile hornav menu */

.hornavmenumobile {display:inline; z-index: 99; }



}



/* #Tablet (Portrait)

================================================== */

    

@media only screen and (min-width: 768px) and (max-width: 959px) {

	

.wrapper960, #header, #logo, .hornavmenu, .content_background,  .logo_container, h1.logo, h1.logo a {width:768px !important;}

.content_background {

	margin: 0 auto;

}



/* Hide default hornav menu */

#hornav {display:none !important;}

/* Show mobile hornav menu */

.hornavmenumobile {display:inline; z-index: 99; }



}



/* #Mobile (Landscape)

================================================== */



@media only screen and ( max-width: 767px ) {



.wrapper960, #header, #logo, .hornavmenu, .content_background,  .logo_container, h1.logo, h1.logo a {

	width:580px !important;

}

.content_background {

	margin: 0 auto;

}

#sidecol_a, #sidecol_b, .items-row .item {

	width:100% !important;

}

#content_remainder {

	width: 100% !important;

}

.top-1, .top-2, .top-3, .contenttop, .contentbottom, .bottom-1, .bottom-2, .base-1, .base-2 {

	width:100% !important;

}

#container_header {

	position:relative !important;

}

#container_slideshow {

    position:relative !important;

}



/* Hide default hornav menu */

#hornav {display:none !important;}

/* Show mobile hornav menu */

.hornavmenumobile {display:inline; z-index: 99; }



.maincontent img {

	margin: 0px 5px !important;

}

/* Sidecolumn Background */

.backgrounds {display: none;}



}



/*  #Mobile (Portrait)

================================================== */



    /* Note: Design for a width of 320px */



@media only screen and (max-width: 440px) {

	

.wrapper960, #header, #logo, .hornavmenu, .content_background,  .logo_container, h1.logo, h1.logo a {

	width:320px !important;

}

.content_background {

	margin: 0 auto;

}



#content_remainder, .items-row .item {

    width: 100% !important;

}

.top-1, .top-2, .top-3, .contenttop, .contentbottom, .bottom-1, .bottom-2, .base-1, .base-2, #sidecol_a, #sidecol_b {

	width:100% !important;

}

.slidesjs-previous.slidesjs-navigation, .slidesjs-next.slidesjs-navigation {

margin-top: -25px;

}

#container_main .wrapper960 {

    margin-top: 0px;

}

#footermenu {

    float: left;

}



/* Hide default hornav menu */

#hornav {display:none !important;}

/* Show mobile hornav menu */

.hornavmenumobile {display:inline; z-index: 99; }



/* Sidecolumn Background */

.backgrounds {display: none;}



/* Slogan Adjust */

p.site-slogan {

    right: 0px;

    top: 60px;

}



}

 

Ciarán