GK Grid problem

Hi,

As I can´t find a forum for GK Grid, I post here.

I am using the News template and are trying to implement GK Grid.
But I have one problem. I want to make the same layout as in the demo: http://demo.gavick.com/joomla25/msocial ... guration-i

Instead of articles I am only using custom HTML modules in all grids.
But as you can see in the attached image, I get more space between the images vertical than horizontal.

I have looked through the setup in Msocial and have setup the modules the same way in my own setup - well I guess I missed something, otherwise it would be working, right?

Can anyone help me out. What is wrong in my setup?

I cannot give you a link to the site, as the site only runs local at the moment.

Regards

Hello,

Most probably you didn't copied the Custom HTML CSS styling from (M)Social:

Code: Select all

/*
 * GK Grid blocks
 */
 
/* Icons */
.gkIcon {
   height: 100%;
   position: absolute;
   width: 100%;
}
.gkIcon > i {
   color: #fff;
   font-size: 84px;
   left: 0;
   line-height: 84px;
   margin: -42px 0 0 0;
   padding: 0;
   position: absolute;
   text-align: center;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   -o-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   top: 50%;
   width: 100%;
}
.gkIcon:hover { background: #272727!important; }
.gkIcon.gkColor4:hover > i { color: #fff!important; }
.gkIcon.gkColor1 { background: #db4a37; }
.gkIcon.gkColor2 { background: #272727; }
.gkIcon.gkColor3 { background: #888; }
.gkIcon.gkColor4 { background: #fff; }
.gkIcon.gkColor4 > i { color: #272727; }
.gkIcon.gkColorFb { background: #3b5998; }
.gkIcon.gkColorTwitter { background: #00aced; }
.gkIcon.gkColorGplus { background: #db3a37; }

/* Photos */
.gkPhoto {
   background-size: cover;
   background-position: center center;
   height: 100%;
   position: absolute;
   width: 100%;
}
.gkPhoto > a {
   height: 100%;
   opacity: 1; filter: alpha(opacity=100);
   position: absolute;
   text-indent: -9999px;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   -o-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   width: 100%;
}
.gkPhoto > a:hover {
   opacity: 0.85; filter: alpha(opacity=85);
}
.gkPhoto > h3,
.gkPhoto > h4 {
   color: #fff;
   font-size: 36px;
   font-weight: 300;
   line-height: 1.1;
   padding: 30px 40px;
}
.gkPhoto > h4 {
   font-size: 24px;
   padding: 20px 30px;
}
.gkPhoto > h3 > a,
.gkPhoto > h4 > a {
   color: #fff;
}
.gkPhoto > h3 > a:active,
.gkPhoto > h3 > a:focus,
.gkPhoto > h3 > a:hover,
.gkPhoto > h4 > a:active,
.gkPhoto > h4 > a:focus,
.gkPhoto > h4 > a:hover,
.gkPhoto > .gkTextBlack > a:active,
.gkPhoto > .gkTextBlack > a:focus,
.gkPhoto > .gkTextBlack > a:hover {
   color: #db4a37;
}
.gkPhoto > h3 strong,
.gkPhoto > h4 strong {
   display: block;
   font-weight: 500;
}
.gkPhoto > .gkTextBottom {
   bottom: 0;
   position: absolute;
}
.gkPhoto > .gkTextTop {
   position: absolute;
   top: 0;
}
.gkPhoto > .gkTextBlack,
.gkPhoto > .gkTextBlack > a {
   color: #272727;
}
.gkPhoto {
opacity: 1; filter: alpha(opacity=100);
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.gkPhoto:hover {
opacity: 0.7; filter: alpha(opacity=70);
}

/* Videos */
.gkVideo {
   height: 100%;
   position: absolute;
   width: 100%;
}
.gkVideo > iframe {
   height: 100%!important;
   position: absolute!important;
   width: 100%!important;
}

/* Text & Headers */
.gkText {
   background: #db4a37;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   height: 100%;
   padding: 25px;
   position: absolute;
   width: 100%;
}
.gkText.gkColor1 { background: #db4a37; }
.gkText.gkColor2 { background: #272727; }
.gkText.gkColor3 { background: #888; }
.gkText.gkColor4 { background: #fff; }
.gkText.gkColor4 h1,
.gkText.gkColor4 h2,
.gkText.gkColor4 h3,
.gkText.gkColor4 h1 a,
.gkText.gkColor4 h2 a,
.gkText.gkColor4 h3 a,
.gkText.gkColor4 h1 > i,
.gkText.gkColor4 h2 > i,
.gkText.gkColor4 h3 > i,
.gkText.gkColor4 p { color: #272727; }
.gkText.gkColor4 h1 a:hover,
.gkText.gkColor4 h2 a:hover,
.gkText.gkColor4 h3 a:hover {
   color: #db4a37;
}
.gkText.gkColorFb { background: #3b5998; }
.gkText.gkColorTwitter { background: #00aced; }
.gkText.gkColorGplus { background: #db3a37; }
.gkText h1,
.gkText h2,
.gkText h3 {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   line-height: 1.2;
   margin: 0;
   padding: 0;
}
.gkText h1 > i,
.gkText h2 > i,
.gkText h3 > i { color: #fff; }
.gkText p {
   color: #fff;
   font-size: 14px;
}
.gkText h1,
.gkText h1 a {
   color: #fff;
   font-size: 40px;
}
.gkText h2,
.gkText h2 a {
   color: #fff;
   font-size: 32px;
}
.gkText h3,
.gkText h3 a {
   color: #fff;
   font-size: 24px;
}
.gkText h1 a:hover,
.gkText h2 a:hover,
.gkText h3 a:hover {
   color: #ffb1ae;
}
.gkCentered {
   left: 0;
   padding: 0 25px;
   position: absolute;
   text-align: center;
   top: 50%;
   width: 100%;
}
.gkText h1.gkCentered {
   margin-top: -24px;
}
.gkText h2.gkCentered {
   margin-top: -20px;
}
.gkText h3.gkCentered {
   margin-top: -15px;
}

You should use these classes as grid module suffixes.

Hi,

Looks good!
Thanks for your help

Regards

Hi dziudek,

I was a bit too fast saying it was working. It is not!

I have copied your code and put it in the end of gk.stuff.php (laying under /gk_news/css)
Put up a grid and some HTML modules with a picture. Everything is ok, except that large space between the pictures - vertical.

Any other ideas? What have I forgotten to configure?

Cheers,

Could you provide me an URL to your website? Without it I will be unable to help you :/

Hi,

No, I cant give a link. The site is only running local while I build.

Unfortunately in this case I'm unable to find a reason of your problems :/

Hi dziudek,

I have PM you about this.

J.

I'm sorry but I didn't received your message earlier - in your case adding of the following code in any CSS file should help:

Code: Select all

.gkGridElement .custom p {
   margin: 0;
}

Just found out, it was my own fault you didn't get the first message.

Your code works perfect!
Thanks a lot

Cheers,