Lists with images

[kamieniarz]

I'd like to make lists work with images but all I can do is adjust everything to specific screen resolution. Any other configuration (different resolutions and actually the most important - mobile view) makes page look simply... ugly. Here's my example

Code

Desktop - I made it look nice, red one is image, black one is text

Mobile - this is bad :/

Maybe there's something I'm doing wrong? What are your sugestions?

PS obviously instead of list I could use sth like :octicons-dot-fill-16: so text would be more "felxible" but styling will be different - there won't be that small gap between each list element and also there won't be that tab in each line of the same element

[kamilkrzyskow]

Too much code hidden away tbh.
Create a minimal example with simple shapes as images and some lorem ipsum code.
And maybe even draw a layout of what you envision.

One possible issue is that you set the width=250 to these images.
This is a static 250px, which doesn't scale well for mobiles.
Use extra CSS to set a percentage based width and/or use media queries to set different layouts depending on the viewport.

Also maybe try to keep it simple and add the image in between list entries? ✌️
Or maybe try putting the image in an inline admonition.

https://squidfunk.github.io/mkdocs-material/reference/admonitions/#inline-blocks