NSP GK5 Responsiveness

Hi friends,
We are trying to implement NSP on this page: http://www.handicappedpets.com/katetest (Joomla 2.5.27, latest NSP)

Unfortunately, the responsiveness is not working as expected when you scale down the page. We have used it successfully on this site, and it's doing what it's supposed to: http://walkinwheels.com/ (Joomla 3)

Any help would be greatly appreciated!

NSP doesn't have RWD implemented inside of the module. It works correctly because our template - storefront adds this implementation and covers also NSP RWD. Now default template doesn't know anything about NSP - so RWD doesn't work. Our designers have decided that RWD is template basing thing so it is not implemented in module itself.

Hi Cyberek,
Thanks for the fast response. That's a bit surprising, as it basically makes the module useless on non-gavick templates. So my next question is: Can I grab the RWD CSS for this template anywhere to implement it on our site?
Thank you!

The easiest would be to get one of quickstarts or templates and search files responsible for mobile behave (mobile.css, tablet.css etc) if nsp tag. Then you can either apply them via separate css files (with media queries tag) or by one css file using css @media queries inside.

Hi Cyberek,
I was able to find code in mobile.css with nps but I found nothing in tablet.css.
Am I still missing something? It isn't working correctly.
I added this into the template css:

@media only screen and (min-width : 884px)
{
/* NSP adjustments */
.nspArtPage .nspArt {
border-top: 1px solid #eee!important;
border-left: none!important;
padding-bottom: 20px!important;
padding-top: 20px!important;
width: 100%!important;
}
.nspArtPage .nspArt:first-child {
border-top: none!important;
}

/* NSP */
.box.header .nspImageWrapper h4 {
font-size: 14px!important;
}

.nspArts,
.nspLinksWrap {
clear: both;
float: left!important;
width: 100%!important;
}
}

Actually I have found more than that.
In tablet.css:

Code: Select all

/* Image Show and NSP Portal Modes */
.gkIsWrapper-gk_storebox {
   margin-bottom: -150px;
}

.gkNspPM-ProductGallery .gkAddToCart,
.gkNspPM-ProductGallery .gkImagesWrapper > div {
   padding: 0 15px;
}

.gkNspPM-ProductGallery .gkAddToCart input.addtocart-button {
   text-align: right;
}

.gkNspPM-ProductGallery .gkImage .gkImgOverlay {
   height: 100px;
   margin: -50px 0 0 -50px;
   width: 100px;
}

.gkNspPM-ProductGallery .gkImage .gkImgOverlay div.PricebasePriceWithTax {
   margin-top: 28px;
}

.gkNspPM-NewsBlocks > figure > figcaption h3 {
   font-size: 21px;
}

.gkNspPM-NewsBlocks > figure > figcaption {
   padding: 0 10px 10px 10px;
}

.gkNspPM-NewsGallery {
   padding: 10px 24px;
}


in small.tablet.css:

Code: Select all

.gkNspPM-NewsGallery .gkImagesWrapper > a {
   padding: 0 3px;
}
.gkNspPM-NewsGallery .gkImagesWrapper > a img {
   padding: 3px;
}
/* Image Show and NSP Portal Modes */
.gkIsWrapper-gk_storebox {
   margin-bottom: -110px;
   min-height: 200px;
}

.gkIsWrapper-gk_storebox .gkIsOverlay {
   background-image: url('../images/header_gradient_small_tablet.png');
}

.gkIsWrapper-gk_storebox figcaption h1 {
   font-size: 30px;
}

.gkIsWrapper-gk_storebox figcaption h2 {
   font-size: 20px;
}

.gkIsWrapper-gk_storebox .gkIsPrev,
.gkIsWrapper-gk_storebox .gkIsNext {
   display: none;
}

.gkNspPM-NewsBlocks > figure {
   margin-bottom: 0;
   margin-top: 0;
   width: 100%!important;
}

.gkNspPM-NewsGallery .gkImagesWrapper > a {
   width: 50%!important;
}

.gkNspPM-NewsGallery .gkImagesWrapper.gkImagesCols1 > a {
   width: 100%!important;
}
.gkNspPM-ProductGallery .gkImagesWrapper.gkImagesCols3 > div,
.gkNspPM-ProductGallery .gkImagesWrapper.gkImagesCols4 > div,
.gkNspPM-ProductGallery .gkImagesWrapper.gkImagesCols5 > div,
.gkNspPM-ProductGallery .gkImagesWrapper.gkImagesCols6 > div,
.gkNspPM-ProductGallery .gkImagesWrapper.gkImagesCols7 > div,
.gkNspPM-ProductGallery .gkImagesWrapper.gkImagesCols8 > div {
   width: 50%!important;
}


in mobile.css:

Code: Select all

/* NSP adjustments */
.nspArtPage .nspArt {
   border-top: 1px solid #eee!important;
   border-left: none!important;
   padding-bottom: 20px!important;
   padding-top: 20px!important;
   width: 100%!important;
}
.nspArtPage .nspArt:first-child {
   border-top: none!important;
}
/* NSP */
.box.header .nspImageWrapper h4 {
   font-size: 14px!important;
}

.nspArts,
.nspLinksWrap {
   clear: both;
   float: left!important;
   width: 100%!important;
}

/* Image Show and NSP Portal Modes */
#gkHeaderMod {
   overflow: hidden;
}

.gkIsWrapper-gk_storebox {
   margin: 140px 0 0 0;
   min-height: 120px;
}

.gkIsWrapper-gk_storebox .gkIsOverlay {
   background-image: url('../images/header_gradient_mobile.png');
}

.gkNspPM-NewsGallery {
   padding: 10px 0;
}

.gkNspPM-NewsGallery > a {
   display: none;
}

.gkNspPM-ProductGallery.gkPagination {
   padding: 0;
}
.gkNspPM-ProductGallery.gkPagination > a {
   display: none;
}