How to make image 100% wide on mobile phone?

HTML & CSS
1

I have a simple html with 2 columns in a table. The left column is with an image, the right column with text. Now the column with text should shift under the image if the width < 550. The shifting works nicely but I would like the image not to stay small but go to 100% width on mobile phone. I added a code for this in the css (img[class=“img-max”]), but it does not work. Could anyone help to get it working?

The code is in this jsfiddle: https://jsfiddle.net/Kippie32/2hqg7xzs/

2

The first thing to do would be to investigate media queries, which is how you give different styles to differently sized devices. But secondly, you are making life harder here by using tables, which aren’t appropriate in this situation, and are harder to work with.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.