0

I'm using MkDocs to generate docs using Markdown, and the theme Read the Docs.

However, I'm having trouble getting small images from scaling up on mobile phones.

I think this is linked to the Read the Docs CSS, but I'm having trouble understanding what should I do to override the behavior of setting width:100% on small screens.

The CSS applied to a certain image on a big screen (using chrome inspection) is:

.rst-content img {
    max-width: 100%;
    height: auto !important;
}
img {
    max-width: 100%;
    height: auto;
}

But if I reduce the screen, I get this extra CSS:

@media screen and (max-width: 768px)
img {
    width: 100%;
    height: auto;
}

I'm able to manually set the image size, for example:

<img src="/something.png" style="width: 25px">

But I would prefer if I could create some CSS to ensure that this is applied to all images, so I don't have to add this HTML tag on the middle of the Markdown file each time I want to add a small image.

NBajanca
  • 3,544
  • 3
  • 26
  • 53

1 Answers1

0

Simply modify the media query (or create a new rule with higher specificity) to set the width of the images to auto for narrow viewports:

@media screen and (max-width: 768px) {
  img {
    width: auto;
  }
}
Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • As I cannot find this attribute in [Read the Docs CSS](https://github.com/mkdocs/mkdocs/blob/master/mkdocs/themes/readthedocs/css/theme.css) I don't know the specificity. Unfortunately, the CSS you provide doesn't change anything. – NBajanca Nov 06 '18 at 11:12