Advertisement:

Author Topic: Default Curve Stopped Honoring Responsive Image CSS  (Read 975 times)

Offline njtweb

  • Sr. Member
  • ****
  • Posts: 917
Default Curve Stopped Honoring Responsive Image CSS
« on: June 24, 2019, 08:00:49 AM »
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
Code: [Select]
img
{
max-width:100%;
max-height:100%;
}

No image - Everything looks great
Code: [Select]
https://www.youthhockeyinfo.com/index.php?topic=1212.0
With an image the reading area stays the same size as image
Code: [Select]
https://www.youthhockeyinfo.com/index.php?topic=1220
Any help identifying the issue is greatly appreciated. Thank you

Offline d3vcho();

  • Sempiterno
  • Lead Localizer
  • SMF Hero
  • *
  • Posts: 3,754
  • Gender: Male
    • frandominguez03 on GitHub
Re: Default Curve Stopped Honoring Responsive Image CSS
« Reply #1 on: June 24, 2019, 08:05:30 AM »
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."

Offline njtweb

  • Sr. Member
  • ****
  • Posts: 917
Re: Default Curve Stopped Honoring Responsive Image CSS
« Reply #2 on: June 24, 2019, 08:14:21 AM »
Only seems to be doing this in Chrome on Samsung S8. Looks fine in FF.

Offline Illori

  • Project Manager
  • SMF Legend
  • *
  • Posts: 51,146
Re: Default Curve Stopped Honoring Responsive Image CSS
« Reply #3 on: June 24, 2019, 08:30:53 AM »
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.

Offline njtweb

  • Sr. Member
  • ****
  • Posts: 917
Re: Default Curve Stopped Honoring Responsive Image CSS
« Reply #4 on: June 24, 2019, 08:39:05 AM »
Hi Illori, The same ads load FF. I don't know why it does it in Chrome only. FF stays completely responsive.

Offline Illori

  • Project Manager
  • SMF Legend
  • *
  • Posts: 51,146
Re: Default Curve Stopped Honoring Responsive Image CSS
« Reply #5 on: June 24, 2019, 09:51:35 AM »
Code: [Select]
<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>

Code: [Select]
<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.

Offline njtweb

  • Sr. Member
  • ****
  • Posts: 917
Re: Default Curve Stopped Honoring Responsive Image CSS
« Reply #6 on: June 24, 2019, 10:29:13 AM »
Code: [Select]
<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.


Code: [Select]
<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.