Tribute page (Kobayashi Issa) feedback and advice on making responsive please!

Hey Campers,

I’ve restarted FCC on the beta track after a while away - I have been working on updating my first tribute page I started last year.

I think I tried to do something a bit too complicated for my first webpage tbh, and have spent far too much time fiddling and trying to make it work :frowning:

Anyway, I’ve now gone through it to include semantic tags, have replaced all style rules based on #ID with class-based styling, replaced all px with ems and %, and generally made it a bit tidier.

I’m reasonably happy with what I’ve done, but struggling to figure out the best way to make it responsive (as is required by the beta curriculum) so its pretty broken on mobile atm.

I have a feeling I’d need to convert it to flexbox before media queries will work, given the way I’ve structured it?

I’m going to try to follow the CSS in 20 minutes tutorial and practice a bit with Flexboxfroggy to get up to speed.

Any critique or advice gratefully received!

1 Like

@silentgamelan Your design on larger viewports looks great! :1st_place_medal:

I notice that your code doesn’t pass all of the fCC tests.

not-passing-tests

Also, did you copy/paste your code into the following validators?

As far as making the page responsive, I recommend going through the Flexbox section of the Beta Curriculum as well as Flexbox Zombies. This article might be helpful as well: An Animated Guide to Flexbox.

I like to start with the 320px viewport width and work my way up from there. That way, I know my design works well on smaller viewport widths.

That should give you a good starting point for improvements. :sunny:

1 Like

where did you learn your css from?