FANDOM


  • I've been learning CSS, so I have a bit more understanding on how to modify features on the wiki, but it's not enough yet for me to figure out this issue with the wiki's infobox.

    On the wiki, instead of shrinking the image down perfectly when it's shrunk, the infobox cuts off the right end of the image, making the image feel unaligned if the subject in the image was was lined based on the center (examples here, with a green leaf being cut off, or here, where the placeholder image feels off on the right side). I think it has something to do with the coding for .pi-theme-ladybug on Common.css for the wiki, but I can't figure out how to change it. The overflow:none shouldn't be required in the .pi-theme-ladybug .pi-image, so how can I modify the code that the image always resizes to perfectly fit its parameters and not get cut on one side?

    Thank you!

      Loading editor
    • Can you link to the infobox in question, please? ^^;

        Loading editor
    • Aiihuan wrote:
      Can you link to the infobox in question, please? ^^;

      I put the link in. My last attempt at writing the post didn't work for some reason, so I wanted to get the text down first in case something went wrong again.

        Loading editor
    • Removing this part from MediaWiki:Common.css should allow the images to fit the infobox. :)
      .pi-theme-ladybug .pi-image {
          margin:5px;
          overflow:hidden;
      }
        Loading editor
    • The image isn't cropped anymore, thankfully, but the downside is that the margin around the image is gone.

        Loading editor
    • If the margin is needed, you could use following:
      .pi-theme-ladybug .pi-image-thumbnail {
          width: 95.5%;
          height: auto;
      }
        Loading editor
    • That works perfectly. Thank you so much!

        Loading editor
    • Hey—using max-width, you can keep the image responsive (without fixed width) and still have it size down and fit the container.

      CSS:

      .pi-theme-ladybug .pi-image-thumbnail {
          maxi-width: 100%;
          height: auto;
      }

      Sooo, if someone uploads an image that's say, 100 or 150px, it'll be centered as normal and won't become massive/blurry. :D

        Loading editor
    • Ah, yes, using max-width would be preferable considering that, indeed. However, they seem to want to keep margin around image, so they might want to use lesser than 100% max-width.
      .pi-theme-ladybug .pi-image-thumbnail {
          max-width: 95.5%;
          height: auto;
      }
        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message