Using MkDocs along with the Read the Docs theme, I am facing an issue with small images not scaling properly on mobile devices.
It seems like this problem is related to the CSS of Read the Docs theme, but I'm unsure how to override the default behavior of setting width:100% for smaller screens.
When inspecting a specific image on a larger screen, the applied CSS is:
.rst-content img {
max-width: 100%;
height: auto !important;
}
img {
max-width: 100%;
height: auto;
}
However, on shrinking the screen size, additional CSS is added:
@media screen and (max-width: 768px)
img {
width: 100%;
height: auto;
}
I have been able to manually adjust the image sizes by including inline styling like:
<img src="/something.png" style="width: 25px">
Instead of having to manually add this HTML tag each time, I am looking for a way to apply a universal CSS rule that can automatically resize all images accordingly.