Menu
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?
627
Unfortunately you cannot use CSS in GitHub markdown as it is a part of the sanitization process. The HTML is sanitized, aggressively removing things that could harm you and your kin—such as.
Wherever HTML is rendered on GitHub (gists, README files in repos, comments on issues and pull requests, ...) you can use any of the HTML elements that GitHub Flavored Markdown (GFM) provides syntactic sugar for.
Even though GitHub Readme files (typically ./readme.md ) are Markdown, and although Markdown supports HTML, you can't put <style> or <script> tags init. (Well, you can, they just get stripped.) So you can't apply custom styles there.
udacity/responsive-images is:
udacity.github.io/responsive-images/
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">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
