News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Default Curve Stopped Honoring Responsive Image CSS

Started by njtweb, June 24, 2019, 08:00:49 AM

Previous topic - Next topic

njtweb

I don't know why but I just noticed my site is no longer honoring the image size scaling down on hand held.

CSS in index.css
img
{
max-width:100%;
max-height:100%;
}


No image - Everything looks great
https://www.youthhockeyinfo.com/index.php?topic=1212.0

With an image the reading area stays the same size as image
https://www.youthhockeyinfo.com/index.php?topic=1220

Any help identifying the issue is greatly appreciated. Thank you

d3vcho

I just tried using my browser's developer tools and it looks good. Which resolution is it having problems with?

"Greeting Death as an old friend, they departed this life as equals"

njtweb

Only seems to be doing this in Chrome on Samsung S8. Looks fine in FF.

Illori

i think the issue is some of your ads are not responsive and it is breaking out on this page. I don't think it is your images in the posts.

njtweb

Hi Illori, The same ads load FF. I don't know why it does it in Chrome only. FF stays completely responsive.

Illori


<ins id="google_pedestal_container" style="width: 100%; z-index: -1;"><div style="height: auto; width: 411px; margin: auto;"><ins class="adsbygoogle adsbygoogle-noablate" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent; height: 899px;"><ins id="aswift_7_expand" style="display:inline-table;border:none;height:899px;margin:0;padding:0;position:relative;visibility:visible;width:411px;background-color:transparent;"><ins id="aswift_7_anchor" style="display:block;border:none;height:899px;margin:0;padding:0;position:relative;visibility:visible;width:411px;background-color:transparent;"><iframe width="411" height="899" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_7" name="aswift_7" style="left:0;position:absolute;top:0;border:0px;width:411px;height:899px;"></iframe></ins></ins></ins></div></ins>



<div class="google-auto-placed" style="text-align: center; width: 100%; height: auto; clear: both;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-4707537526563540" data-adsbygoogle-status="done" style="display: block; margin: 10px auto; background-color: transparent; height: 280px;"><ins id="aswift_3_expand" style="display:inline-table;border:none;height:280px;margin:0;padding:0;position:relative;visibility:visible;width:467px;background-color:transparent;"><ins id="aswift_3_anchor" style="display:block;border:none;height:280px;margin:0;padding:0;position:relative;visibility:visible;width:467px;background-color:transparent;"><iframe width="467" height="280" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_3" name="aswift_3" style="left:0;position:absolute;top:0;border:0px;width:467px;height:280px;"></iframe></ins></ins></ins></div>
this does not have proper width set and is breaking the responsive theme. you need to set the width correctly. this is the bunch of ads appearing after the last post and below the reply etc buttons at the bottom of the topic view.

also the ads you have in the block17 don't have proper width and will break the responsive layout.

then if I remove the lower linktree your site shows up responsive, so look into those items together.

njtweb

Quote from: Illori on June 24, 2019, 09:51:35 AM

<ins id="google_pedestal_container" style="width: 100%; z-index: -1;"><div style="height: auto; width: 411px; margin: auto;"><ins class="adsbygoogle adsbygoogle-noablate" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent; height: 899px;"><ins id="aswift_7_expand" style="display:inline-table;border:none;height:899px;margin:0;padding:0;position:relative;visibility:visible;width:411px;background-color:transparent;"><ins id="aswift_7_anchor" style="display:block;border:none;height:899px;margin:0;padding:0;position:relative;visibility:visible;width:411px;background-color:transparent;"><iframe width="411" height="899" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_7" name="aswift_7" style="left:0;position:absolute;top:0;border:0px;width:411px;height:899px;"></iframe></ins></ins></ins></div></ins>


Wow, thanks Illori, I'll have to figure this one out. I'm using Googles "auto responsive placement" tools. It was suggested in my Adsense panel by Google to allow them to automatically place. I think it's fairly new so I guess I might have to go back to original ads.


<div class="google-auto-placed" style="text-align: center; width: 100%; height: auto; clear: both;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-4707537526563540" data-adsbygoogle-status="done" style="display: block; margin: 10px auto; background-color: transparent; height: 280px;"><ins id="aswift_3_expand" style="display:inline-table;border:none;height:280px;margin:0;padding:0;position:relative;visibility:visible;width:467px;background-color:transparent;"><ins id="aswift_3_anchor" style="display:block;border:none;height:280px;margin:0;padding:0;position:relative;visibility:visible;width:467px;background-color:transparent;"><iframe width="467" height="280" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_3" name="aswift_3" style="left:0;position:absolute;top:0;border:0px;width:467px;height:280px;"></iframe></ins></ins></ins></div>
this does not have proper width set and is breaking the responsive theme. you need to set the width correctly. this is the bunch of ads appearing after the last post and below the reply etc buttons at the bottom of the topic view.

also the ads you have in the block17 don't have proper width and will break the responsive layout.

then if I remove the lower linktree your site shows up responsive, so look into those items together.

Advertisement: