How to position ads responsively

[Sala]

The look of ads on PC they appear correctly but not on mobile.

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

[phenomlab]

@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

Loading...

Please wait while the description loads.

Loading...

Also, you should review this

No preview available

It seems stackoverflow.com declined to respond to the data request. The link will still work, but no preview is available.

stackoverflow.com

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)

[Sala]

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

[phenomlab]

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

[Sala]

@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]

@Sala Try replacing with

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

[Sala]

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

[phenomlab]

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

[Sala]

@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]

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

[Sala]

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

Wah!

[phenomlab]

@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]

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