New to CSS / Card type layout with table type formatting

Hi. I’ve been developing a Ruby on Rails site for a few weeks and now want to sort out the front page so it is ‘responsive’. I have broadly what I want at https://eventpuddle.com/. The cards are done as tables to allow me to mock up what I want but I am looking for advise as how to best take this to the next level. Doing some research masonry jquery may be the way to go and have also come across fluxbox. Be good if someone could point me in the correct direction.

As an aside I may make a carousel for each day when the site is viewed on mobile/tablet. Well a carousel type where the used swipes to see more content (not an automatic one).

This is the first mistake. This is not tabular data, so should not be formatted in a table. Aside from the semantics, tables will make it difficult to make responsive.
See the comment in this recent topic about “card” layouts, a few methods are mentioned.

Edit I also recommend you validate your html. There are currently more than a thousand validation errors on that page. :eek:

As I said ‘The cards are done as tables to allow me to mock up what I want’. The whole point if the post is I know it should not be done in tables, this is why i used the term mock up. I did start using CSS but the big problem I had was I did not seem to be able to have a fixed height. Well I could specify height but the background colour only went to the end of the text. I’me also not sure how to get the layout working.

Its basically

  • a top segment with date left justified and price right justified
  • a second segment with event titkle
  • a third segment with venue
  • a forth with description
  • a fith with a more… link right justified.

So if i nest the CSS can I float and justify stuff withing each element I create?

The reason I was interested in masonry is, from what I can gather, it makes it a lot easier to make sites responsive (i.e. you have have to fiddle with lots of CSS for different screen sizes etc.). What I am trying to avoid is getting CSS working on desktops and then finding I have to do lots of fiddly hacks to get it working on other platforms. I believe this is why fluxbox exists, to allow us to concentrate on creativity without the technology getting in the way.

But as I said the main reason I decided to use tables to mock up was the problem with the background colour only showing up to the end of the text.

I have never bothered with masonry. I fail to see why people turn to javascript to do the job of CSS.
The secret is to keep things as fluid as possible, that way you don’t need a million @media queries to be responsive. And that does not require a lot more css, it’s actually more about what you leave out of your styling, avoiding rigid rules like fixed widths and heights.
As it stands, the cards are responsive, in that they wrap on smaller screens, which isn’t a bad start. The only thing letting the page down regarding responsiveness is the header part.
(When I said the tables would be hard to make responsive, I assumed each card was a cell in a row, not a table itself.)
Though I suspect you want something a bit more fluid and elegant that the floats you have. I can see flex-box working well with this to get uniform heights (not fixed) per row.

2 Likes

Yes I would go for something very roughly like this:

(Bear in mind I took almost 10 minutes to do that :slight_smile: )

2 Likes

That’s just the sort of thing I had in mind.
Though you may have gathered already I’m into using flex-basis to dodge all the @media queries.
My slightly slimmer fork:-

1 Like

Yes that’s good also :slight_smile:

I tend to use media queries because I don’t like the orphans on the last line stretching full width. (Every client I’ve done that for has complained :slight_smile:) If there wasn’t a nasty bug in ios I could simply have used min-width instead of the media queries but ios ignores it.

1 Like

On the one hand I like the effect of flex-grow for filling space, but it’s true, it can look odd with orphaned items going full width.
I wish flex had a way to override the inline type wrapping that gives you orphans and could use ‘evening’ method to attempt to keep the number of items per row as even as possible.

2 Likes

Yes, that’s exactly what’s needed and I’ve been looking at grid and that effect is still impossible even with grid unfortunately.:slight_smile:

Thanks. In terms of flux-box my understanding is its great for mobiles/tablets but for desktop there can be issues with older browsers. what are peoples take on this? And yes In terms of it being responsive the tables do work on desktop but not on android. Even the header does not wrap and header uses CSS without tables.

Thanks PaulOB that’s great. You are a Starr.

It has good support now, all current, major browsers support it.

The only one to watch is IE11 as it has bugs.
IE9 is the last IE to not support it at all, but that’s old enough not to need to worry about (unless you are one of those who values the tiny minority using legacy browsers over the huge majority using up-to-date or mobile browsers).
But then we have fall-backs for that very reason:-

 vertical-align: top; /* fallback*/
 display: inline-block; /* fallback*/

So it’s no big worry either way.

The header is poorly thought out. It has no containing block to give it structure and uses too many uncleared floats, so elements clash when space gets tight.
It would not lake much to fix, even without altering the html to a better structure it could be improved.
Remove the float from .logo, give .topmessage a clear: both and a bit of margin-top.
The title does not warp because there are no spaces in it. In this case I probably would add a media query to make it smaller on mobile. Or you could try a dynamic size if you feel more adventurous.

I did wonder about that, but thought that would probably be the case. I have yet to complete my grid learning.

OK, been playing with the CSS and doing some googeling. I have it working great on desktop. Been using the chrome emulator and got it working better on mobile. How here is a thing. I have a 24" monitor in front of me a,d a 5.5" mobile. both are 19201080 but the mobile is 4 smaller. This means I really need to screen size to work work out how things should display but flux-box/edia query seems to only give you resolution?

Have you included the viewport meta tag in the head of the page?
<meta name="viewport" content="width=device-width,initial-scale=1.0">

Do you have the test page set up on a web site so we can see it?

No, will give it a go, do you have a god link explaining it. I have been playing with ‘@media screen and (max-width:’ and changing font sizes but this may be easier. Its at https://eventpuddle.com/. Have a look and let me know what you think.

login1,

Please read this post by Paul O’Brien about the viewport meta tag.

Why is this Code Important in a Webpage? What's the purpose? - #2 by PaulOB

The viewport meta tag does not replace the media queries. Quite the contrary, it enables them.

If you want to read more posts, click the magnifying glass icon at the top of the form page and search for “viewport meta tag”. Do not search this post only.

I have three recommendations for you to consider when writing code
(1) Do not use minimized CSS while developing your site. It makes it difficult to locate properties that may need to be changed.
(2) Use the HTML validator to check for and correct significant errors before posting for help.
(3) SamA74 and PaulOB have given you some excellent advice. Follow the advice given by those who offer to help and tell them what you find. If you don’t understand something, ask then.

I’m not sure how your site is supposed to be used, but I’ll bet it will work better AFTER you add the viewport meta tag in the head of the page.

Give your whole page a wrapper as mentioned by Sam and set it to a max-width and margin:auto as I have done with .wrap. You don’t want the whole page stretching edge to edge on large screens as that is unusable. About 1680 is large enough unless it was a graphic site with large images.

Also note that you need to take into account the side margins when you set the flex width as flex:0 0 50% will not fit nicely when the element has 1% margins as well. You would need to reduce the 50% to 48% to allow it all to fit.

Thanks, going through the advice and implementing it. One think, puting in the viewport meta as screwed up the flix-box stuff. i now only get a single colum on my mobile (was getting 2) and everything is too big. I can make the text smaller but not sure why I only have one column.

Site is at https://eventpuddle.com/, is it OK to post CSS here?

type or paste code here

Leave that in, you need it for a responsive site. That is not what is causing your problem, it is the way you are using flex.

You appear to have a number of media queries where you alter the flex-basis property to varying percentage values at differing widths. It is this which controls the number of items that appear on a row.
On the smallest query: max-width: 480px you set it to 100%, so yes, you should expect only one item per row at 100% width.

The other problem I have identified which will affect viewing on the smallest screens is that the items don’t actually fit on the screen. It took a little while to spot the reason.
In the top section of each item you have two paragraphs with classes titlenowrap and venuenowrap. These both have the property white-space: nowrap which is preventing the text from wrapping, keeping it on a single line which is too wide to fit on a mobile screen.
It makes no sense to me to prevent wrapping, particularly on a small screen.

Regarding the flex-basis, the approach I prefer to use is to set it with a value in em units. This negates the need for a number of queries to control item wrapping and lets them wrap naturally as available space permits similar to inline-blocks.

2 Likes