Images non repsonsive on Mobile

Hi

To have resized images adapting to the various screen size you don’t need to add height and width in the html code of the article " about us " i noticed you have pasted in the code a word document with all the code taken from it

This is the code you used for the image

Code:

<p><img class="size-auto" src="images/mezzanine3.jpg" alt="mezzanine3" width="1045" height="431" /><span style="font-family: arial, helvetica, sans-serif; font-size: 12pt;"></span></p>

same thing for the table code you added

Hi, same problem here.

when i drag the desktop dimension to mobile dimension. image not resized.
i try to put as intro image, full text image or just insert it in joomla article. No luck.

Hey pavit -- I tried cleaning up that code -- I took out the height and width there and now the code is as follows --

</span></p>
<p><img class="size-auto" src="images/mezzanine3.jpg" alt="mezzanine3"></span></p>

Yet it still does not fix the problem. I have tried it on a nexus and yes it works landscape -- but in portrait it cuts it off -- and it cuts nearly all of it off on a mobile phone.

You can try to do with my solution as below

Open templates/ja_university/css/layout-mobile.css file

Add new script

Code:

#ja-mainbody img {
     max-width: 100% !important;
}

Remember to clear cache from Admin area after making changes

Thanks Ninja -- I’ll do that in the next hour and report back!

Sadly still no joy Ninja. Would you have any other advice?

Ninja it worked! I did not clean out the cache -- apologies for putting up with me! Thank you!

Mark

When I do this then the width is oke but the height of the pictures is the same as the original pictures (not proportional). Can i fix this?

When I do this then the width is oke but the height of the pictures is the same as the original pictures (not proportional). Can i fix this?

The images in content of About Us and Project Background menu are showing with original image(width and height are original ).

I’m confused with your comment that they are (not proportional), maybe you need to upload other images to see the difference.

Thank u Ninja for your fast reply.
Please look at this page on a mobiel or make your browser smaller: http://www.destapperij.nl/posters/veghel-lacht.html
The image is oval?

The images still have height and width attributes attached.

Code:

<img width="800" height="1132" src="/images/content/veghellacht/140410-VEGHEL_LACHT-POSTERA4.jpg" alt="140410-VEGHEL LACHT-POSTERA4" style="margin-right: 8px; margin-bottom: 8px; border: 1px solid #9a3b34">

Until you delete them…

Code:

<img src="/images/content/veghellacht/140410-VEGHEL_LACHT-POSTERA4.jpg" alt="140410-VEGHEL LACHT-POSTERA4" style="margin-right: 8px; margin-bottom: 8px; border: 1px solid #9a3b34">

… you’re going to get a squeeze-boxed image.
As long as you have image attributes, the template is going to try its darndest to try and pull it off…with bad results.

Having NO attributes allows the template to proportionally resize the image.

Have fun!

I tried cleaning up that code -- I took out the height and width there and now the code is as follows --

Code:

</span></p>
<p><img class="size-auto" src="images/mezzanine3.jpg" alt="mezzanine3"></span></p>

Yet it still does not fix the problem. I have tried it on a nexus and yes it works landscape -- but in portrait it cuts it off -- and it cuts nearly all of it off on a mobile phone.

The class="size-auto" is still considered an image attribute. Just get rid of it and let the template’s freak fly and you should be good!

Code:

</span></p>
<p><img src="images/mezzanine3.jpg" alt="mezzanine3"></span></p>

Thank you jwbrett ! That’s the solution..

Open templates/ja_university/css/layout-mobile.css file
Add new script

#ja-mainbody img {
max-width: 100% !important;
}

Delete the height and width attribute in the code of the article:
<img width="800" height="1132" src="/images/….
<img src="/images/….