NSP GK5 Responsiveness

Support forum dedicated to free and advanced Joomla content presentation module with various layout options and data sources support.
GK User
Fri Sep 25, 2015 9:56 pm
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!
User avatar
Fresh Boarder

GK User
Sat Sep 26, 2015 1:07 pm
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.
User avatar
Moderator

GK User
Mon Sep 28, 2015 1:06 pm
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!
User avatar
Fresh Boarder

GK User
Tue Sep 29, 2015 1:25 pm
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.
User avatar
Moderator

GK User
Wed Sep 30, 2015 5:47 pm
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;
}
}
User avatar
Fresh Boarder

GK User
Fri Oct 02, 2015 4:34 pm
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;
}
User avatar
Moderator


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.