Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS tables ..nested tables Reply To: CSS tables ..nested tables

#236484
grimski
Participant

I’ve made some decent progress with this @Paulie_D:

http://codepen.io/moy/pen/XXRrwL

As you can see I’ve used floated divs, with percentage widths. I was thinking of using flexbox to centre the content. I’m not too experienced with flex, I’ve tried align-items, align-content but I can’t see to get it to work. Do I need to add another div within each cell and target that?

I’ve also added in the break points and hide, what needs to be hidden at each breakpoint. So there’s a pretty decent overview of what each layout will be like and what spacing it needs.

I was going to add percentage widths of mobile and tablet as well but is this something flexbox could handle? Spacing the columns out evenly and is it possible to prevent certain ones from wrapping? The buttons at the end of each track won’t really change with the occasionally exception of the price being a few digits higher. I’m not sure if it’s possible to prevent the items within .track__actions from wrapping onto the next line. If not, maybe I could do what I’ve down with the play icon – pulling it out of the content so it’s width doesn’t interfere with the rest.