I’m running into situation where the image looks too large (here ) in the default theme. Is there a good way to make a specific image smaller or make the text flow around it?
Here’s what it currently looks like, too big for a simple diagram like this
See this if you want to wrap text around images:
@redders I used to utilize HTML cards for images for a few years now in order to achieve several stylistic goals that couldn’t be done with image cards out of the box (shrink down portrait-oriented images, add borders to images with white backgrounds, etc.). But with lazy-loading being built into image cards a few months ago (which I was “jealous” of but didn’t want to go through all of my previous images to add the functionality to, never mind what might be added later) I was then indirectly le…
See this if you want to constrain the height of images:
Now that I’m not on mobile and can relay some code, here’s the code I use to achieve the aforementioned:
.kg-card.kg-image-card img:not(.kg-card.kg-image-card.kg-width-wide img) {
display: block;
margin: 0 auto;
width: auto;
}
.kg-card.kg-image-card img:not(.kg-card.kg-image-card.kg-width-wide img) {
max-height: 300px;
}
@media screen and (min-width: 525px) {
.kg-card.kg-image-card img:not(.kg-card.kg-image-card.kg-width-wide img) {
max-height: 400px;
}
}
@medi…
2 Likes
