Max-size for images on mobile views

[wilzbach]

As you can see below images look a bit pixelated and too large on mobile devices.
I guess something like max-height: 30% could be an easy solution.
Anyways great article!

[mdparker]

After I saw this I shrunk the size of the image a bit. I'll see about adding a more generic solution at some point. I really wish my CSS fu were stronger.

[wilzbach]

I'll see about adding a more generic solution at some point. I really wish my CSS fu were stronger.

Maybe there's a solution for WordPress (my WordPress fu isn't existing), but there's the picture tag which allows to give the browser multiple sources and it picks the best one depending on his resolution. It works in all major browsers (yes IE doesn't count as major browser for me anymore), but in case you are worried there's a polyfill too.

[wilzbach]

but there's the picture tag which allows to give the browser multiple sources and it picks the best one depending on his resolution

And as mentioned sth. like

article img .alignleft {
   max-height: 30%;
}

should do the trick ;-)

[wilzbach]

Ping at this - it's still happening on every blog article, e.g.

It's really as simple as adding the three lines of CSS I proposed, I just wasn't sure to which file I should make a PR too. style.css?

[mdparker]

The thing to do is to add it to style_nomin.css, then run it through a minimizer and save it as style.css. The problem is that there's so many options in there it's hard (for me at least) figure out exactly where to put new stuff. Every time I've added something where I thought it belonged, it had no effect and I had to dig around. And then there are the difference sections for the different screen sizes... ugh. I really want something less complex to maintain.

Anyway, if you can figure it out, I'm happy to take a pull request. If not, I'll make this a priority and work on it tomorrow. I need to set WP up locally again so I can test it out.

[mdparker]

I can't get the max-height/width attributes to do anything. When I shrink the window down, the image eventually pops up above the text, but I have yet to see where the hell I need to add the img attributes to make it happen sooner. I friggin complex CSS files.

[wilzbach]

Okay, I will give it a try later today - sorry I have been busy 😕

[wilzbach]

Here's what I came up with:

#25

I friggin complex CSS files.
...
Every time I've added something where I thought it belonged,

My approach was rather pragmatic - add it to the bottom. That worked well for dlang.org so far too.