Standard badges rendering too big

[darribas]

I'm not sure this is a problem (not even sure it's a problem, or the problem is my poor HTML chops...) of jupyter-book but I've ran into it and might be or relevance for other folks. I'm automatically converting .md files from GitHub repos that include badges from Travis, etc. When I render the book, they look too big. See, next to the md file resulting from building the book:

Is there any obvious easy solution? Ideally, I'd like to keep the badges too as they're useful information for the book audience.

Thank you very much, and thank you very much for (another) awesome project!

]d[

[choldgraf]

Holy moly, that's way too big haha... I bet it's the css of the default template. Do you see where the size of the image is being applied in the css?

[choldgraf]

(I'd look myself but not at a computer right now)

[darribas]

Mmmm… I have no idea. It seems it uses something called inuit. The thing though is I wouldn't necessarily want to change the rendering of all images, just those relating to badges. Would that be a) doable b) not too hard for a CSS newbie like me? Thank you very much in advance :)

[choldgraf]

Lemme give it a shot as a part of #66 :-)

[choldgraf]

66 removes the width: 100% CSS rule for any image (only for notebook output images), which I think is going to solve this problem for you. You might need to use your own CSS class to make sure the badge snaps to the left instead of being centered (for an example, see the badge that's in the intro.md file of that PR)

[darribas]

Bam! I just changed the two lines suggested in #66 for the width:100% and this now looks a lot better:

The centering is something I can definitely live with. Thank you very much for the prompt and excellent response @choldgraf! I'm closing the ticket now as consider it addressed :-)

[choldgraf]

woot! If you want those left-aligned, you can add a custom class to the images either by adding {:.myclass} and that'll be added to the p element above the image, which you can then style as you like. You could also manually embed the images w/ HTML, which works in markdown, e.g. <img src="mysrc.png" style="margin-left: 0px" />