CSS for mobile size layout seems to break logo on readthedocs

[zxiiro]

We're using the sphinx bootstrap theme for our readthedocs page and notice that the mobile page seems to break if you provide a small logo.

For example http://docs.opendaylight.org/ and resize the browser to mobile size.

Looks like ReadTheDocs injects some css into the site that's causing the issue. Injecting the following link into your header is enough to reproduce the issue on a local build.

    <link rel="stylesheet" href="https://media.readthedocs.org/css/badge_only.css" type="text/css" />

[zxiiro]

Did some more troubleshooting here and discovered that readthedocs inserts some css below which causes the mobile site to draw the logo way too big.

<link rel="stylesheet" href="https://media.readthedocs.org/css/badge_only.css" type="text/css" />

[ryan-roemer]

Holy moly, you aren't kidding!!!

@zxiiro -- Do you have any suggestions for a fix? Or which styling is messing with the theme?

The unfortunate thing here is that the RTD CSS comes after the theme's...

[zxiiro]

Unfortunately not. I don't spend too much time doing web dev stuff so not too familiar with all this.

Edit: RTD injects a few more js files but they aren't needed to reproduce the issue we are seeing here so I decided to not list them.

[ryan-roemer]

@zxiiro -- No worries. I'm not a styles person myself, but I know some folks that are and they're helping me 😉

[zxiiro]

Ok I tracked it down to the specific lines of code from readthedocs' css hopefull this helps you move forward.

@media screen and (max-width: 768px) {
    .rst-versions {
        width: 85%;
        display: none
    }
    .rst-versions.shift {
        display: block
    }
    img {
        width: 100%;
        height: auto
    }
}

The "width: 100%" field inside the img tag is what's causing the logo to get stretched.