3 columns on tablet

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

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;
}
}


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

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.

That might be my problem - I mean for this to apply to any right column. You can use the homepage as an example

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.

Thank you. I'll look into that.