Images spilling outside div only on iPhone

Question

I have a table with 3 columns. The first row of each column has an img and I have given max-width of the table as 100%. Each image has an actual width of 200 px.

<table id="table1_id">
<tr id="row1_id">
  <td>
    <img src="image 1 url"/>
  </td>
  <td>
    <img src="image 2 url"/>
  </td>
  <td>
    <img src="image 3 url"/>
  </td>
</tr>
</table>

Problem is that this is rendering properly everywhere except iPhone. Only on iPhone (have tried with 4S and 5S) the last column image is only showing half, whereas my expectation is obviously that the columns (therefore the images) resize themselves as per the iPhone screen width.

One can check the actual website at www.checkgaadi.com via iPhone. Here is the fiddle also - https://jsfiddle.net/s1gfbwvy/

During testing I find that when I resize the browser window to simulate various phone widths, the screen is not responsive (resize does not happen) when I go below browser window width of 290px.

Can someone help please. I am a newbie and sorry if this is a basic question. I am stuck with this for a full day now.

score 0 · Answer 1 · edited May 23 '17 at 12:06

Just found out the solution while fixing a seemingly unrelated problem. The buttons while rendering properly on Android were looking pretty bad on iOS. Found this post explaining the fix and it fixed the image overflow issue as well - CSS submit button weird rendering on iPad/iPhone. The reason why it fixed (in hindsight) the overflow issue can also be explained because the buttons were also bigger with webkit, and now with webkit gone, the buttons were smaller and therefore no overflow.

All I had to do was apply the style "-webkit-appearance: none;" to the input button elements.

Images spilling outside div only on iPhone

1 Answers1