Feedback for Mobile First Tribute Page

Hi all,

I hope everyone is keeping well and enjoying the holidays as best and as safely as possible.

I’ve been working on a mobile-first tribute page for a few days now I’m having a lot of trouble making the transition from mobile to desktop style grid.
Currently my project is passing all but one of the associated tests (the img responsiveness test is failing) but, perhaps embarrassingly, I’ve enjoyed working on the project and would like some feedback as to how to improve it just for the sake of having something that is both functional and nice to look at.

I’m happy with the mobile layout and figured it would work well up to a width of around 1200px but beyond that a desktop layout would be nice but that is where I find myself struggling.

Perhaps some feedback around my implementation of the desktop layout or suggestions on a more functional layout - any kind of help/feedback/criticism to keep me going would be amazing.

Thanks!

frank

link to GitHub project: https://github.com/franko-c/fcctributepage

Hello @franko-c!
Welcome to the Forum!

Can you host your code at CodePen?

It is easy to see and review.

Thank you for taking the time to check my post out.

I had to host some of the images on another site to get the CodePen looking okay, here it is:

https://codepen.io/franko-c/pen/jOMZKbO?editors=1100

Thanks!

1 Like

Welcome to the forums @franko-c. Your page looks good. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 9/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue. (Be sure and read more than just the first line of the failing message.)
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

What you have at 1200px would look just as well over 1200px. It seems to fall apart over 1200 px.

1 Like

You can host your images on imagebucket.io for free.

Hi Frank,
I thought it looks gorgeous! I really liked the strong use of color. The grid is beautiful! Maybe some padding (left and right) to keep the text from going all the way to the edge though? And forcing the timeline column to be wide enough that the timeline doesn’t extend beyond the bottom of the grid.

On the column layout, I wonder if you could add a footer at the bottom of the page echoing one of those colors again, to tie everything together?

Happy New Year! Stay safe! K

1 Like

First, I commend you on using a mobile first approach. I narrowed my browser as skinny as it will go and cranked the text size up to 300% and everything looked good with no horizontal scrollbars.

I do agree that your wider version needs some TLC though. First, get rid of the self-imposed 1200px break point. The content should determine the break point, not some arbitrary number. One way to do this is to use em units for your break points. This will take into account both view port width and text size. Second, you make one big jump from a single column to five columns (timeline + four records). And when that jump occurs I’m getting a horizontal scroll bar! Instead, let the content determine when to make the changes to your layout.

Figure out how much room you want for each of those (in em units). Let’s say you want 15em width for the timeline and 20em width for each record. So the first break point can’t happen until at least a 55em view port width (the timeline + two record columns). The next break point would happen at 75em (timeline + 3 records). Do you see where I am going here? The content determines where the break points occur. And the changes are gradual, not all at once.

Yes, using this approach, most people will never have their browser wide enough to see a timeline + four record columns. That’s OK, because what they will see will be much more readable and look much nicer.

2 Likes

Hi to everyone who replied.

Sorry to revive an old thread, I just wanted to thank you all for your feedback.

I started again with my grid layout, opting to wireframe it first for every different media query and later adding content. I found myself styling individual elements a lot less than previously.

I tried my best to implement responsiveness in the way that @bbsmooth mentioned using some variants of autofit, minmax and grid-auto-rows but unfortunately I couldn’t figure out how to maintain some semblance of a layout instead of having everything resize as it felt necessary.

What I am left with is a somewhat responsive page that still uses media queries - I’d love to get away from them and if anyone could lend me some time to figure out how to implement the respective styles that I have created potentially without media queries that would be cool.

Here is the codepen:

https://codepen.io/franko-c/pen/jOMZKbO?editors=1100

Thanks everyone!

P.S Most if not all of the FCC checks for the tribute page will fail as I have not yet implemented the required features, just focusing on how it looks for now.

Hey @franko-c, the responsiveness is much better but I would suggest instead of using px units for your break points you use em instead. This will take into account both view port width and text size. That way when you manually increase the text size the layout will shift to take that into account. For example, if I have my browser just wide enough to see the full five column layout at the default font size, if I then manually increase the text size the layout will fall back to two columns because the width in ems will have decreased.

1 Like