Solution 1 :

udacity/responsive-images is:

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">

Problem :

I have a GitHub project with 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?


Comment posted by…

mybe try somthing like this

Comment posted by Sasha Shpota

@MatanSanbira thank you for the suggestion. Unfortunately it didn’t help – I guess the GitHub’s markdown compiler removes the options, because in the end html there are no other options except the main one. Or maybe I am doing something wrong.

Comment posted by johannchopin

@SashaShpota Using

Comment posted by Domino

The width attribute should be an integer without unit.