https://idea-hack.com/blog/107220/

How to fit Google Adsense responsive ads to the size of the parent element

The Google Adsense responsive ad unit automatically spreads across the screen when viewed on a smartphone. I will show you how to prevent this.

Use data-full-width-responsive attribute

Please look for data-full-width-responsive in script tag.

.wp-block-ug-code-block-1-9196bb2d-5356-4be9-af8a-5599819669b3 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-9196bb2d-5356-4be9-af8a-5599819669b3 pre { background-color: #f5f5f5 !important; color: #545454 !important; }.wp-block-ug-code-block-1-9196bb2d-5356-4be9-af8a-5599819669b3 pre code { font-size: 14px !important; }code
data-full-width-responsive="true"

This is true by default.
This setting is whether to automatically expand and display the full-screen width when viewed on a smartphone.

If this is changed to false, the automatic expansion will be turned off.

And, the responsive ad will be adapted to the width of the parent element.

.wp-block-ug-code-block-1-7e3e9518-92bc-4e81-aac0-dcb138bd0331 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-7e3e9518-92bc-4e81-aac0-dcb138bd0331 pre { background-color: #f5f5f5 !important; color: #545454 !important; }.wp-block-ug-code-block-1-7e3e9518-92bc-4e81-aac0-dcb138bd0331 pre code { font-size: 14px !important; }code
data-full-width-responsive="false"

It is OK if it can be described as the sample below.

.wp-block-ug-code-block-1-e6c1d584-1e1f-4c82-87df-f64918a660f7 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-e6c1d584-1e1f-4c82-87df-f64918a660f7 pre { background-color: #f5f5f5 !important; color: #545454 !important; }.wp-block-ug-code-block-1-e6c1d584-1e1f-4c82-87df-f64918a660f7 pre code { font-size: 14px !important; }javascript
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="hogehoge"
     data-ad-slot="111111111"
     data-full-width-responsive="false"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Summary

This code fix is also acceptable to Google.

未分類