Issue with image width

  • Resolved iSaumya

    (@isaumya)


    11 years, 5 months ago

    Hi,
    If you visit my site http://www.isaumya.com, you will see that there is a header image illustration there which is 160x160px and it also has a @2x version. i.e 320x320px. Now when people are visiting my site from desktop it looks fine. without any issue. but when it is visited from mobile device, the image looks spherical. My theme is a responsive theme and for mobile device it it uses 120x120px. If you try to render my site using any mobile render app like mobiletest.me you wont see the issue. This is only happening when the site is visited from an actual mobile device.
    This is what it looks like in actual mobile: http://i.imgur.com/bAFJ7NR.png
    This is what it needs to look (mobile render): http://i.imgur.com/TYMO5T1.jpg

    I hope you can clearly see the difference. This is happening for WP Retina plugin. When I deactivaye Wp Retina, things seems ok. Check this: http://i.imgur.com/jIoqWpd.png

    What should I do? I’m using all the default settings of your plugin. Please help, this is ruining my site’s user experience 🙁

    https://ww.wp.xz.cn/plugins/wp-retina-2x/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Jordy Meow

    (@tigroumeow)

    11 years, 5 months ago

    You should probably have a look at your CSS queries. Find a phone to test your website and make changes, since you are a developer, it should be easy to find the solution.

    Thread Starter iSaumya

    (@isaumya)

    11 years, 5 months ago

    I did. You see there is nothing wrong with the CSS. I think (almost 90% sure) this is happening due to picturefill.js as you know this better I am looking for your help.

    Secondly I’ve closely checked the issue as per my css rules in phone the max-height is needs to be 120px; Which is fine. But when I’m visiting the site with mobile, it first loads the 1x version of the image properly, but after few moments when every js loads completely, the 2x version loads upin the phone and the 2x version doesnot keep the aspect ratio. Creating the spharical image.As you can see if I disable this plugin the issue is not happening further. That means for some reason after loading 2x image it is not following the css rules. Also the magical thing is when you render the same page on amy mobile render site, there is no issue.

    Thread Starter iSaumya

    (@isaumya)

    11 years, 5 months ago

    have you even checked the issue by yourself?

    Plugin Author Jordy Meow

    (@tigroumeow)

    11 years, 5 months ago

    To be honest, I am far of knowing PictureFill. It would be a good idea to ask those guys over there: https://github.com/scottjehl/picturefill/issues

    I never had the issue though but I am pretty sure it could be corrected with CSS queries. If it is a mobile then fix the CSS for this logo and that’s done. I wouldn’t investigate further than that.

    Thread Starter iSaumya

    (@isaumya)

    11 years, 5 months ago

    Anyways I’ve fixed the issue by using CSS on my site. But I’m having a feeling deep inside me that this is not the proper fix for this issue. For some reason it was taking alternative css designs for that part. So I had to place important tags.

    Anyways the issue has been fixed but I’m not happy with the solution 🙁 (Though maybe this is the only solution.)

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Issue with image width’ is closed to new replies.