You could possibly make the main content area a little less wide and add some margin to the right of it.
Definitely start by making a Child Theme – you should not modify any theme files – particularly in the default theme – as your changes will be lost when WP is updated. See: http://codex.wordpress.org/Child_Themes
Once you have that set up, yes, adjusting the layout is possible.
Thanks. Yes, I am in the process of making child theme. I am not expert in CSS, could you please advise me how to make the main content area a little less wide and/or add some margin to the right of it (as ivonnacode suggested)?
Twentytwelve theme is responsive. So, it’s pointless to change the content width to accommodate the fixed width of AdSense, because the layout will scale down in small screen and mess it up anyway.
You should be looking at the How to make Google AdSense responsive.
https://support.google.com/adsense/answer/1354736
Thanks for the reply. The responsive AdSense does not seem to help either. I am testing responsive ad for the following page:
http://www.theindiansabroad.com/contact-me/
Should I start a new thread? The responsive adsense code (account info modified):
<script type="text/javascript">
google_ad_client = "ca-pub-xxxxxxxxx";
width = document.documentElement.clientWidth;
google_ad_slot = "aaaaaaaa";
google_ad_width = 320;
google_ad_height = 50;
if (width > 500) {
google_ad_slot = "yyyyyyyy";
google_ad_width = 468;
google_ad_height = 60;
}
if (width > 800) {
google_ad_slot = "zzzzzzzzz";
google_ad_width = 728;
google_ad_height = 90;
}
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
The ad being displayed is 728×90 size.
Thanks.
The code works, but it won’t auto adjust, it reads on each page load. You could try downsize your browser’s width to around 400px and refresh, the AdSense’s width now become 320px.
A couple things, default mobile page padding in 2012 is 24px left and right. So in mobile portrait viewport (320px), you only have 320-48= 272px, so your AdSense shoud have a default width of 272px not 320px.
You could adjust 2012’s padding from 24px to 10px, so we will have 300px page’s width in mobile portrait, and set your default AdSense’s width to 300px.
The middle breakpoint might be at 600px, which has the content width of 378px.
The end breakpoint should be 960px which has the content width of 625px.
Thanks. Where in the style.css do I find this 24px padding. I am looking through the code, without luck. Any guidance is greatly appreciated; not an expert in css.
Thanks.
Use in child theme’s style.css or in Custom CSS plugin.
@media screen and (max-width: 480px) {
.site { padding: 0px 10px; }
}
This will keep page’s padding 10px for mobile viewport of 480px and smaller.
Thanks.
This is what my child theme looks like as of now (still learning).
Is there a way that I can decrease padding for all the users, in addition to the mobile/smaller-screen ones as suggested above? I still have some overlap (even after responsive adsense) between main content and the side-bar.
/*
Theme Name: Twenty Twelve Child
Theme URI: http://theindiandsabroad.com/
Description: Child theme for the Twenty Twelve theme
Author: twenty twelve child
Author URI: http://theindiansabroad.com/contact-me/
Template: twentytwelve
Version: 0.1.0
*/
@import url(“../twentytwelve/style.css”);
@media screen and (max-width: 480px) {
.site { padding: 0px 10px; }
}
I’m not sure why you didn’t change the Ad size in the JS to comply with the widths. Remember what we are doing here is to change the Ad size, not changing the layout of the site.
According to this ( to get the right height for width of 300px ),
https://support.google.com/adsense/answer/2953032?hl=en
our default Ad size must be 300×250, not 320×50. We can have 320×50 only if there is no padding at all when in mobile portrait viewport (320px). But without padding, the design is ruined, it will look like the site is suddenly cut off on the sides.
To continue with this method, you have to adjust the Ad size in the JS to comply with the content width.
Example:
300×250 for viewport of 320 to 800
468×60 for viewport of 800 and up
( at 800 the content area is 490 so you have the 468 one )
( at 960 the content area is 625 but there is no better size available )
To get a wider Ad, like 728×90, it could be put in above content area ( below the nav in header.php )
Might as well make the ad aligned center using CSS.
But if AdSense is your primary concern, why bother with all of this ? It would be a lot easier to go with a theme that optimized for AdSense, a fixed width one that you don’t have to do all of these hacks.
