Need help with RSD table

User 2799419 Photo


Registered User
2 posts

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
User 232214 Photo


COO
798 posts

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 :P

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!
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 481123 Photo


Registered User
6 posts

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


Registered User
607 posts

I think this reference may help.

Frank
User 1869666 Photo


Registered User
89 posts

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?
User 122279 Photo


Senior Advisor
11,147 posts
Online Now

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. ;)
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RSD, RFF and RBB: http://www.horgenhonning.net/sharing/


User 122279 Photo


Senior Advisor
11,147 posts
Online Now

Right, but they don’t have courses in CC programmes.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RSD, RFF and RBB: http://www.horgenhonning.net/sharing/


User 1869666 Photo


Registered User
89 posts

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


Registered User
1,645 posts

Carolyn Borjon wrote:
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?

Looks to me like you just need set the width of thew containers to a value rather than auto
The Sky Is A big Empty Space : But There Is No Room For Error
website https://rsdtutorials.com
User 2699991 Photo


Registered User
1,645 posts

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

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
The Sky Is A big Empty Space : But There Is No Room For Error
website https://rsdtutorials.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.