3 columns on tablet

February 2014 Joomla Template
Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Wed Nov 26, 2014 1:38 am
Reply with quote
Report this post
Hello - I'm working to get our News2 templated site working with 3 columns for both a 1250px wide computer setting and a 1000px tablet configuration.

For the desktop version, a right column width of 24% works well and allows for our 300px ads to display correctly. However on the tablet version the 24% setting doesn't work - I'd really need either 300px or 30%. Where can I override the template to do this?

The test site is at http://www.stnbeta.com if this wasn't clear.

Thanks,
Kent
User avatar
Junior Boarder

teitbite
Sat Nov 29, 2014 9:02 am
Reply with quote
Report this post
Hi

I think best results You will get by overriding this css style with a construction similar to:

Code: Select all
@media only screen and (min-width:767px) and (max-width: 1000px) {
#gkBannerRight {
    width: 35% !important;
}
#gkBannerLeft {
    width: 65% !important;
}
}
User avatar
Moderator

GK User
Mon Dec 15, 2014 5:22 am
Reply with quote
Report this post
Thanks for the reply, however I'm still having issues with this. I'm not familiar with the "@media ..." syntax so I may have made a mistake there. I tried adding the following to my override.css file but I didn't see a difference:

Code: Select all
@media only screen and (min-width:767px) and (max-width: 1000px) {
#gkBannerRight {
    width: 300px !important;
}
}


My goal is for my right column to stay fixed at 300px on either a desktop or tablet in landscape mode. Right now on a tablet the column is shrinking but my ads aren't, which is looking broken.

Suggestions?

Thanks,
Kent
User avatar
Junior Boarder

teitbite
Mon Dec 15, 2014 6:16 pm
Reply with quote
Report this post
Hi

I can see Your code but it's applied to a column where there is no ads. You need to show me what ads are not reacting, so I'll better make them responsive and not break template responsive options.
User avatar
Moderator

GK User
Tue Dec 16, 2014 1:05 am
Reply with quote
Report this post
That might be my problem - I mean for this to apply to any right column. You can use the homepage as an example
User avatar
Junior Boarder

teitbite
Fri Dec 19, 2014 10:49 am
Reply with quote
Report this post
Hi

I've checked it, but unfortunately I cannot do much to make ads responsive. You need to use some responsive google ads extension. Google ads are using iframe and loading lots of extra scripts. Responsive extension will simply use a smaller ads format when needed.
User avatar
Moderator

GK User
Sun Dec 21, 2014 2:57 am
Reply with quote
Report this post
Thank you. I'll look into that.
User avatar
Junior Boarder


cron