I was working happily on my CSS for the ‘profile page’ assignment, thinking it would lend itself nicely to any screen size without major issues due to the mainly centered layout I chose (not intentionally I must say). But after James asked me if I was going to make it responsive it occurred to me that actually there is one thing in there that definitely won’t work on smaller screens… a table. Granted, it’s only a small and very simple table with 4 headings and one cell each for the content, but it still stopped looking good below a width of approx. 880 pixels.
It goes from this…
I thought I would share this in case anyone else is looking for a solution to their table woes and more. Not only did I solve my problem but also learned a bit more about the
:before pseudo-element which I haven’t tried to use before. It seems to be really handy! I might tweak the table further if I can to have 2×2 columns between 880 and around 550px, and only have the fully stacked version on really narrow screens – but first, spurred on by the enjoyment of learning new stuff, I think I might actually venture into more RWD and tweak my navigation a bit.