udacity.github.io/responsive-images/examples/1-07/twoImages50pcWithMarginCheck 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">
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?
mybe try somthing like this
@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.
@SashaShpota Using
The width attribute should be an integer without unit.