I have a cshtml page and the html below renders great on a PC/laptop browser. But on a mobile phone browser like an iphone the jpg Yl8a7fN.jpeg (550x550px) doesn't fit, which forces the user to scroll to the right. The same thing happens to the four jpgs on the element table2 (the user scrolls horizontally to see all 4 images).

So the question is: how can I edit the HTML below so that the 550x550px is reduced to the space in the browser and moves below the first block of text (instead of to the side)?

In the case of the second table "table2", instead of the four jpgs displaying next to each other horizontally, each would also be resized to the available space and they would display vertically instead of horizontally (i.e. one below the other).

In other words, the user would only have to scroll down instead of horizontally.

This is the html (I'm also including a version in codepen):

Excepteur sint occaecat cupidatat non proident








occaecat cupidatat non 





Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.





Lorem ipsum dolor sit amet

It would look something like below on my iphone so that the user only has to scroll down and not to the right.