Make GitHub's README look different on smartphones and desktops using only HTML (CSS is restricted)

Question

I have a GitHub project with README.md file. I embed an image in the following way

<img src="./logo.svg" align="right" width="180px">

Here is an example of such an image.

Note: GitHub allows using embedded HTML but not CSS, that's why I am using width property instead of css.

This way the image occupies the right side of the screen allowing to put text on the left side.

Problem: If you open such link on a smartphone there is too less space for the text and it looks bad with split words or letters that take the whole line. It would be great if I could use larger width specifically for mobile devices. But GitHub restricts usage of CSS in markdown files and I can't use @media queries.

Question: How to make GitHub's README look different on mobile and desktop without using CSS?

Answer 1

udacity/responsive-images is:

• a GitHub page project, visible at udacity.github.io/responsive-images/
• with a page dedicated to responsive images, with examples.
  For instance: "Two images, 50% width with margin", seen in examples/1-07/twoImages50pcWithMargin

Check in their viewport directives would be enough to implement a responsive image, combine with their inline CSS style.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">