Reisio: Oh I use rgba, but.

 
Churchill: Jrajav: Yes, that’s what started to cause it. This page previously used tables but then recently switched to css columns.

Keas: Glaisher: Well the column count is 3, and the text appear to be larger than a third

Chandrasekara: Glaisher: Oh, one reason could be that break-inside: avoid-column doesn’t seem to be supported atm

Shurtliff: It’s supported on my browser but disabling that doesn’t fix it

Tetro: So the solution is probably to not apply the css column styles when there’s just one item.

Sharpnack: Diamonds tex-overflow?

Drier: Glaisher: Adding display: inline-block to the ul “fixes” it

Katzen: But it flows the text within one-third, its column

Bellanca: Dunno if that’s what you’re going for?

Rigano: Glaisher: Display: inline-block elements won’t be split between columns

Kratchman: Doing that also doesn’t fix it here

Jebb: Ropo, ? no, the “content” property

Steinhardt: Hello, is there a way to get the same effect as here but without making the entire row a clickable element? for example, making the photo + frame and the name below it a clickable link but nothing more than that

Botero: Http://codepen.io/anon/pen/LpgoGp

Sandersen: Looks like category viewer also which uses css columns doesn’t apply those styles when there’s one item so I think that’s what I’ll do.

Anctil: Or do i just have to accept using two copies of a link for this?

Therurer: How do I center an image that overflows a parent div?

Lowrie: L8D: does it overflow it _intentionally_?

Fahrenkrug: Lemondom_: Yeah, it overflows the parent. I want to set overflow: hidden on the parent, and have the child image centered within it

Kesley: Lemondom_: I know how to do that with background-image but is it possible to do that with an img?

Hewgley: I’m basically cropping the sides of the image

Artez: L8D: there are many ways: one would be to give the img element display: block; margin: auto;

Brookings: You are using the outer container as cropping tool?

Shira: Well, you can compensate by pushing the img itself using margin-left/margin-right or position: relative; left or right

Balboni: So half of crop width for centering it

Sharpnack: Merkazu ike this? — https://jsbin.com/cihomevuce/edit?html,css,output

Kafka: Lemondom_: my “outer container” would actually be the browser viewport in this case

Dari: L8D: ok, also doable, move the img element itself then

Helker: L8D: one thing though: it would be better for performance when the server side crops the image file before sending to client

Palm: Lemondom_: well I need the user to be able to expand the width dynamically. It’s not like the server can predict the width of the client

Hinger: L8D: maybe something lke SRCSET may be interesting for you?

Hutter: This might sound silly, but is #EFEFEF the equivalent of F0F0F0?

Dimariano: Is there a way to ensure the body element properly encapsulates the content for background purposes? tried: http://stackoverflow.com/questions/17555682/height-100-or-min-height-100-for-html-and-body-elements and it did not work

Savas: It appears that the html and body elements are stopping at 100vh despite being 100%

Naab: Merkazu: You mean you want the background image to cover the whole page at 100% height like this? Supposing you’re only covering with one image and not multiple images from time to time

Notwick: MrXXIV: nearly, but no

Pantaleon: MrXXIV: if you want to use values that are designed for humans, then use rgb or rgba, with 0%-100%

Gherardi: No, the background image itself fades to white at the top. i don’t want to mess with the aspect ratio of it

Hanavan: Rgb94%,94%,94% is straightforward to a human

Boque: Reisio: Oh I use rgba, but that was literally just a silly quick question 😀 I adore rgba http://mobame.com