{"id":33588,"date":"2013-05-26T14:56:16","date_gmt":"2013-05-26T09:26:16","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=33588"},"modified":"2026-10-11T10:21:47","modified_gmt":"2026-10-11T04:51:47","slug":"modify-adsense-code-for-responsive-design","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2013\/05\/modify-adsense-code-for-responsive-design\/","title":{"rendered":"How to Modify AdSense Code for Responsive Design (2026)"},"content":{"rendered":"<p>Want to modify AdSense code for responsive design so ads fit every screen, from phones to wide monitors? In 2013 Google first allowed publishers to change their ad code for responsive sites, and we shared the JavaScript trick it recommended. That old <code>show_ads.js<\/code> code no longer works. Today AdSense has responsive ad units built in, and Google officially lets you fine-tune them with CSS. Here&#8217;s how to do it in 2026.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-60358\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/responsive-design-1024x512.png\" alt=\"Modify AdSense code for responsive design\" width=\"760\" height=\"380\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/responsive-design-1024x512.png 1024w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/responsive-design-300x150.png 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/responsive-design-150x75.png 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/responsive-design-768x384.png 768w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/responsive-design.png 1280w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><strong>Quick answer:<\/strong> Use an AdSense <strong>display ad<\/strong> unit with the default responsive code (<code>data-ad-format=\"auto\"<\/code> and <code>data-full-width-responsive=\"true\"<\/code>). If you need exact sizes, Google allows you to remove <code>data-ad-format<\/code>, give the <code>&lt;ins&gt;<\/code> tag a class, and set its width and height with CSS media queries. You can even hide the unit on small screens with <code>display:none<\/code>.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6aeeaa18b5c04\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6aeeaa18b5c04\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/05\/modify-adsense-code-for-responsive-design\/#Why_responsive_AdSense_code_matters\" >Why responsive AdSense code matters<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/05\/modify-adsense-code-for-responsive-design\/#Method_1_Use_the_default_responsive_ad_code\" >Method 1: Use the default responsive ad code<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/05\/modify-adsense-code-for-responsive-design\/#Method_2_Set_exact_ad_sizes_per_screen_width\" >Method 2: Set exact ad sizes per screen width<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/05\/modify-adsense-code-for-responsive-design\/#Method_3_Hide_an_ad_unit_on_small_screens\" >Method 3: Hide an ad unit on small screens<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/05\/modify-adsense-code-for-responsive-design\/#What_changed_since_2013\" >What changed since 2013<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/05\/modify-adsense-code-for-responsive-design\/#Frequently_asked_questions\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/05\/modify-adsense-code-for-responsive-design\/#Is_it_allowed_to_modify_AdSense_code_for_responsive_design\" >Is it allowed to modify AdSense code for responsive design?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/05\/modify-adsense-code-for-responsive-design\/#Do_responsive_ads_change_size_when_I_rotate_my_phone\" >Do responsive ads change size when I rotate my phone?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/05\/modify-adsense-code-for-responsive-design\/#Why_is_my_responsive_ad_not_showing\" >Why is my responsive ad not showing?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/05\/modify-adsense-code-for-responsive-design\/#Should_I_use_Auto_ads_instead\" >Should I use Auto ads instead?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Why_responsive_AdSense_code_matters\"><\/span>Why responsive AdSense code matters<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Most sites now use a <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/02\/responsive-theme-design\/\">responsive theme design<\/a>, so the same page adapts to any screen width. A fixed 728&#215;90 banner on a 390-pixel phone screen causes sideways scrolling, hurts Core Web Vitals and annoys readers. Responsive ads resize to fit the space, so you don&#8217;t need separate code for mobile.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Method_1_Use_the_default_responsive_ad_code\"><\/span>Method 1: Use the default responsive ad code<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In AdSense, go to <strong>Ads &gt; By ad unit &gt; Display ads<\/strong>, keep the size as <strong>Responsive<\/strong> and copy the code. It looks like this:<\/p>\n<pre><code>&lt;script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-1234567890123456\"\r\n     crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\r\n&lt;ins class=\"adsbygoogle\"\r\n     style=\"display:block\"\r\n     data-ad-client=\"ca-pub-1234567890123456\"\r\n     data-ad-slot=\"1234567890\"\r\n     data-ad-format=\"auto\"\r\n     data-full-width-responsive=\"true\"&gt;&lt;\/ins&gt;\r\n&lt;script&gt;\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n&lt;\/script&gt;<\/code><\/pre>\n<p>AdSense reads the width of the container and chooses the best ad size. Make sure the parent element has a width; ads can&#8217;t load in a zero-width container.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Method_2_Set_exact_ad_sizes_per_screen_width\"><\/span>Method 2: Set exact ad sizes per screen width<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If you want a specific size at each breakpoint, Google&#8217;s help page on <a href=\"https:\/\/support.google.com\/adsense\/answer\/9183363\" target=\"_blank\" rel=\"noopener\">how to modify your responsive ad code<\/a> allows this pattern:<\/p>\n<pre><code>&lt;style&gt;\r\n.qot_responsive_ad { width: 320px; height: 100px; }\r\n@media (min-width: 500px) { .qot_responsive_ad { width: 468px; height: 60px; } }\r\n@media (min-width: 800px) { .qot_responsive_ad { width: 728px; height: 90px; } }\r\n&lt;\/style&gt;\r\n&lt;ins class=\"adsbygoogle qot_responsive_ad\"\r\n     style=\"display:inline-block\"\r\n     data-ad-client=\"ca-pub-1234567890123456\"\r\n     data-ad-slot=\"1234567890\"&gt;&lt;\/ins&gt;\r\n&lt;script&gt;(adsbygoogle = window.adsbygoogle || []).push({});&lt;\/script&gt;<\/code><\/pre>\n<p>Note the changes: <code>display:inline-block<\/code>, a custom class, and no <code>data-ad-format<\/code> attribute. The ad loads at the size set for the screen width when the page opens.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Method_3_Hide_an_ad_unit_on_small_screens\"><\/span>Method 3: Hide an ad unit on small screens<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To skip a sidebar ad on phones, add a media query with <code>display:none<\/code>:<\/p>\n<pre><code>@media (max-width: 400px) { .qot_responsive_ad { display: none; } }<\/code><\/pre>\n<p>When the unit is hidden this way, AdSense doesn&#8217;t request an ad, so it&#8217;s allowed. Don&#8217;t hide ads with JavaScript after they load, or cover them with other elements.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"What_changed_since_2013\"><\/span>What changed since 2013<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>The old <code>google_ad_width<\/code> \/ <code>show_ads.js<\/code> JavaScript is retired. Replace any old ad code with the current asynchronous <code>adsbygoogle.js<\/code> code.<\/li>\n<li>Responsive display ads are now the default, and Auto ads can place ads for you.<\/li>\n<li>Unfilled slots can be hidden with <code>data-ad-status=\"unfilled\"<\/code>; see <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2022\/03\/hide-unfilled-adsense-ad-spaces\/\">how to hide unfilled AdSense ad spaces<\/a>.<\/li>\n<\/ul>\n<p>Testing different placements still helps; our older guide on <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/06\/ab-testing-adsense-for-higher-ctr\/\">A\/B testing AdSense for higher CTR<\/a> explains the idea, and AdSense now has built-in experiments too.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Frequently_asked_questions\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Is_it_allowed_to_modify_AdSense_code_for_responsive_design\"><\/span>Is it allowed to modify AdSense code for responsive design?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, within Google&#8217;s documented changes: setting sizes with CSS media queries, changing <code>data-ad-format<\/code>, or hiding units with <code>display:none<\/code>. Other edits to the ad code aren&#8217;t allowed.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Do_responsive_ads_change_size_when_I_rotate_my_phone\"><\/span>Do responsive ads change size when I rotate my phone?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No. The size is chosen when the page loads. Rotating or resizing the window doesn&#8217;t reload the ad.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Why_is_my_responsive_ad_not_showing\"><\/span>Why is my responsive ad not showing?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Usually the container has no width, the ad is inside a hidden element, or there was no ad to fill the slot.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Should_I_use_Auto_ads_instead\"><\/span>Should I use Auto ads instead?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Auto ads are easiest, but manual responsive units give you more control over placement. Many sites use both.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want to modify AdSense code for responsive design so ads fit every screen, from phones to wide monitors? In 2013&#8230;<\/p>\n","protected":false},"author":4,"featured_media":60358,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[43],"tags":[13,49],"class_list":["post-33588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-money","tag-adsense","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/33588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=33588"}],"version-history":[{"count":1,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/33588\/revisions"}],"predecessor-version":[{"id":63750,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/33588\/revisions\/63750"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/60358"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=33588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=33588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=33588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}