search

mmistakes / jekyll-theme-skinny-bones

A Jekyll starter with a variety of flexible layouts and components.
https://mmistakes.github.io/jekyll-theme-skinny-bones
MIT License
805 stars 904 forks source link

A new approach to google ads. #8

Open carlosdelfino opened 10 years ago

carlosdelfino commented 10 years ago

First of all I would like to congratulate the work. Thank you for providing your layout with such license, permit and other professionals may have their website with a more visually pleasing, to me this is very valuable, as they do not command anything CSS and HTML.

I hope to contribute to your layout, but as I am struggling to use the CSS, especially with the framework you use, it is very new to me.

I am trying to insert a banner ad on pages that are of type file, but to make such insertion needed to be more vertical, and the layout is having problems, see figure below.

The gray block that contains the advertisement is not in the correct size, and not as the domain nor the CSS framework used, I have many difficulties to adjust it.

The code I'm using are the links: _layouts/archive.html cursoarduino.md _data/ads.yml

captura de tela 2014-11-03 as 13 13 36

mmistakes commented 10 years ago

If you look _sass/_layout.scss you'll see I'm setting the width of #main .ads by using a mixin. That column width was meant for ads to be used as a sidebar which is why your 728px wide horizontal banner doesn't fit.

It's probably easier if you don't use the .ads class name that wraps the ads in the various layouts, and instead create your own that is sized appropriately.

You'll have to consider different screen widths as well otherwise you'll have some nasty scrollbars on all of your pages because the banners are too wide. I handle this by using by adding onto the responsive ads snippet Google Adsense provides and defining the exact banner widths to fit at various screen dimensions (phone, tablet, desktop, etc).

<style>
.responsive-ads { width: 300px; height: 200px; } // default banner ad 300 x 200 px
@media(min-width: 520px) { .responsive-ads { width: 468px; height: 60px; } } // for tablets
@media(min-width: 768px) { .responsive-ads { width: 160px; height: 600px; } } // for desktop+
</style>

Hope this helps some.

carlosdelfino commented 10 years ago

Well, I understood the changes, whenever I try to make some adjustments in the CSS, I end up hindering rather than enhancing, since I'm not a WebDesigner, despite dominating in some programming languages like PHP and JavaScript.

I made a few more adjustments, and still not getting success.

I tried to fix the length (width) of the div, but I had suscesso.

Leave the tips of the changes I made in the code, if you want to apply, I do a pull request.(carlosdelfino/carlosdelfino.github.com@46b240b24fab5a7d108a5c3f9e4ee3711accdd44)

Thank you for your attention.