Re: Twitter layout issue

Hello GavicPro Team,

Probably that's my last request for help in relation to CloudHost template.
I am trying to setup 3 columns to display tweets:
theppd.org (bottom5)
However I can't make it working. At the moment best view is with 1 column and 2 rows.
I would like to set up 3 columns and 1 row.
Can you help me with this?

I have this code in gkstuff.css

Code: Select all

/* Social GK5 */
.gkTweets { overflow: hidden; }
.gkTweets > div { margin: 0 -5px; }
.gkTweet {
   background: #fff;
   color: #666;
   display: inline-block;
   float: left;
   padding: 2px 5px;
}
.gkTweetContent { margin: 5px 5px 5px 5px; }
.gkTweet > div > img {
   height: 100%;
   float: left;
   width: 48px;
   height: 48px;
   margin: 5px 15px 10px 0;
}
.gkTweetName {
   display: block;
   margin: 0 0 8px 0;
}
.gkTweetName a {
   color: #000;
   font-weight: bold;
   font-size: 12px;
   display: inline-block;
   line-height: 12px;
   text-shadow: 1px 1px #fff;
   text-transform: none;
}
.gkTweetName a:before { content: "@"; }
.gkTweetName small {
   font-size: 11px;
   color: #999;
   margin-left: 5px;
   padding-left: 5px;
   border-left: 1px solid #ddd
}
.gkTweet > div p {
   color: #666;
   margin: 0;
   word-wrap: break-word
}
.gkTweet p > a { color: #666; }
.gkTweet p > a:active,
.gkTweet p > a:focus,
.gkTweet p > a:hover { color: #fa7252; }
.gkTweet > div > .gkTweetInfo {
   color: #000;
   display: block;
   font-size: 12px;
   font-style: italic;
   padding: 15px 0 0 0;
}
.gkTweet > div > .gkTweetInfo:before {
   color: #fa7252;
   content: "d";
   font-family: university-pixellove;
   font-size: 13px;
   font-style: normal;
   padding: 0 5px 0 1px;
   position: relative;
   top: 2px;
}
.gkTweet > div > .gkTweetInfo a:first-child { padding-right: 10px }
.gkTweet > div > .gkTweetInfo a {
   font-size: 10px;
   margin: 6px 0 0 12px;
   float: right;
   line-height: 14px
}
.gkTweetInfo,
.gkTweetInfo a { color: #999 }
.gkTweet > div > .gkTweetInfo a:first-child { margin-left: 5px }
.separator {
   width: 100%;
   clear: both
}
.gkDivider {
   clear: both;
   width: 100%;
}

I have additional question in relation to GK Social - Tweets. How can I display tweets only from our organization?

gk.stuff.css Find this line :

.gkTweet {
background: none repeat scroll 0 0 #fff;
color: #666;
display: inline-block;
float: left;
padding: 2px 5px;
}

You set the gkTweet divs to 33.333333% but with the padding it makes them too big so it splits them up. You can either make the size smaller if you want to keep the padding or just remove the padding all together. Save and re upload.

That's great. Thanks for this fix

Welcome

Devsmi,

I have realized that twitter posts are not responsive.
They look quite bad on mobile: (mymind.org). Do you have any fix?
How it can be displayed on mobile.