Skip to content

How to position ads responsively

Solved WordPress
13 2 4.0k 1
  • The look of ads on PC they appear correctly but not on mobile.

    alt text

    Is there any CSS we could use to position the ads and make them responsive (to not pass out the width div) for all pages like this one https://sopriza.com/question/songs-banned-radio-tv/

    Thanks

    wrote on last edited by phenomlab
    #2

    @Sala Are your ads set to be responsive? You could use CSS, but the images will in fact look worse as they will but cut short. My recommendation would be to follow the below

    https://support.google.com/google-ads/answer/7005917?hl=en-GB

    Also, you should review this

    https://stackoverflow.com/questions/22463041/displaying-responsive-google-ads-css-problems

    If you really need something in the short term, you could use this

    @media (max-width: 767px) {
    	#google-center-div img {
    		width: 370px;
    		margin-left: -420px;
    		height: auto !important;
    	}
    }
    

    However, it’s worth noting that the height value is being set by javascript so changing it dynamically will not work with CSS (it’s being overridden by js)

  • phenomlab phenomlab has marked this topic as solved on
  • @Sala Are your ads set to be responsive? You could use CSS, but the images will in fact look worse as they will but cut short. My recommendation would be to follow the below

    https://support.google.com/google-ads/answer/7005917?hl=en-GB

    Also, you should review this

    https://stackoverflow.com/questions/22463041/displaying-responsive-google-ads-css-problems

    If you really need something in the short term, you could use this

    @media (max-width: 767px) {
    	#google-center-div img {
    		width: 370px;
    		margin-left: -420px;
    		height: auto !important;
    	}
    }
    

    However, it’s worth noting that the height value is being set by javascript so changing it dynamically will not work with CSS (it’s being overridden by js)

    wrote on last edited by
    #3

    @phenomlab Looks like i will have to dig on this one, because the above CSS code didn’t work. Thanks for trying!

  • @phenomlab Looks like i will have to dig on this one, because the above CSS code didn’t work. Thanks for trying!

    wrote on last edited by phenomlab
    #4

    @Sala that’s odd - it works when targeting your site.

    b81b961d-7389-42b7-938f-6f353873d9e8-image.png

  • @Sala that’s odd - it works when targeting your site.

    b81b961d-7389-42b7-938f-6f353873d9e8-image.png

    wrote on last edited by
    #5

    @phenomlab the above CSS code is still inserted while am searching for other options. Or Maybe it’s my mobile phone? Have you tested on your mobile if it’s working?

  • @phenomlab the above CSS code is still inserted while am searching for other options. Or Maybe it’s my mobile phone? Have you tested on your mobile if it’s working?

    wrote on last edited by
    #6

    @Sala Try replacing with

    @media (max-width: 767px) {
    	#google-center-div img {
    		width: 370px !important;
    		margin-left: -420px !important;
    		height: auto !important;
    	}
    }
    
  • @Sala Try replacing with

    @media (max-width: 767px) {
    	#google-center-div img {
    		width: 370px !important;
    		margin-left: -420px !important;
    		height: auto !important;
    	}
    }
    
    wrote on last edited by
    #7

    @phenomlab it’s replaced, should I turn off wp rocket?

  • @phenomlab it’s replaced, should I turn off wp rocket?

    wrote on last edited by
    #8

    @Sala Don’t turn it off, but do clear the cache.

  • @Sala Don’t turn it off, but do clear the cache.

    wrote on last edited by
    #9

    @phenomlab Their widths still pass out the div.

    My actual ad code:
    <div><center>Advertisement<script async=“” src=“https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xx” crossorigin=“anonymous”></script><!-- example_responsive_1 -->
    <ins class=“adsbygoogle” style=“display: inline-block; text-align:center; width: 100%; height: 280px;” data-ad-client=“ca-pub-xx” data-ad-slot=“xx” data-ad-format=“auto” data-full-width-responsive=“true”></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script></center></div>

  • @phenomlab Their widths still pass out the div.

    My actual ad code:
    <div><center>Advertisement<script async=“” src=“https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xx” crossorigin=“anonymous”></script><!-- example_responsive_1 -->
    <ins class=“adsbygoogle” style=“display: inline-block; text-align:center; width: 100%; height: 280px;” data-ad-client=“ca-pub-xx” data-ad-slot=“xx” data-ad-format=“auto” data-full-width-responsive=“true”></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script></center></div>

    wrote on last edited by
    #10

    @Sala Then you have to use responsive ads as I posted previously. Did you review those links?

  • @Sala Then you have to use responsive ads as I posted previously. Did you review those links?

    wrote on last edited by
    #11

    @phenomlab Sir it has worked after I changed @media @phone {

    Wah! 😄😄

  • @phenomlab Sir it has worked after I changed @media @phone {

    Wah! 😄😄

    wrote on last edited by
    #12

    @Sala ok, fine, but I’d still recommend you go down the responsive ads route. The CSS code will probably cause issues with other images as they are loaded within the Google ads code

  • @Sala ok, fine, but I’d still recommend you go down the responsive ads route. The CSS code will probably cause issues with other images as they are loaded within the Google ads code

    wrote on last edited by
    #13

    @phenomlab yes that’s the problem with these J’s, I will try my best , If I find something better I will share. Thanks


Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee ☕
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics