Hey all,

I'm new to RSD, but come to web design via Microsoft FrontPage and Adobe Dreamweaver.
In my current website, I have a list of publications. http://www.stephendrogers.com/readflat.html

Basically, I want to create a row [Story/Book] [Magazine/Publisher] [Date/Issue] [More Info]
that will be duplicated about a thousand times to list my various publications.

As the screen shrinks, I want [Date/Issue] [More Info] to slip under [Story/Book] [Magazine/Publisher] for each row.

As the screen shrinks further, I want the entry for every row to read:
[Story/Book]
[Magazine/Publisher]
[Date/Issue]
[More Info]

Then, as I publish more things, I need to be able to insert new rows.

I've been unable to figure out how to go about accomplishing this design.

Stephen

Included in the app is a tutorial on how to make responsive tables using flexbox. You can access it from the theme browser and play with the HTML and design — pretty sure you can mold that to your needs

There's also an online version.
http://www.coffeecup.com/help/articles/design-responsive-tables-with-flexbox/

You can easily replicate rows by duplicating them or copy and paste and then update the contents.

Hope that helps!

Trying to get to the link above, but it does not work. Please help with new location of responsive flexbox tutorial.
Thanks :-)

I think this reference may help.

Frank

Earlier this year or late last year I built a responsive table with the help of the tutorial at https://www.youtube.com/watch?v=seUJrQb7nA4

I've been trying to use that same video to create a new responsive table but when I try to add the first Container it only shows in a small section on the left end of the column. The next step is to duplicate the Flex-item twice which creates 3 lines/columns. However, all mine does is add two more tiny containers.

This has worked before for me so not sure what I'm doing wrong. Any ideas?

Hi,
The reason might be that the tutorial is using RSD 1.5, which had the 'Coffeegrinder' grid system. From version 2 on, the grid systems are either Foundation or Bootstrap, and they work in the opposite direction (mobile to wide instead of wide to mobile.
You may have to work 'backwards' with that tutorial. The end result (I didn't watch the whole video, bit short of time) will be the mobile view, I guess. You have to start with that and gradually widen the viewport.
There is a nice guy named Wayan. He might read this and offer to make a new video tutorial for you, showing what I've just described.

Right, but they don’t have courses in CC programmes.

Thanks Inger. I'll see if I can manage to "work backwards" and I'll hope for Wayan to come to the rescue!

Looks to me like you just need set the width of thew containers to a value rather than auto

working from to the left of the first breakpoint
I set the 3 containers to a width of 32%
Flexboxed the first container to "align self"= stretch then to grow=4