In the new FCC-projects with testing the user stories, i just finished the Tribute Page. I decided to make it about The Simpsons.
Feedback is welcome!
Like the colour scheme and theme, the layout is good for desktop too, but not very friendly for mobile.
You applied caption for image, this is very great!
Great and applied good typography, this is very good.
You also stated the source links, awesome, so pro.
It has some small issues,
- first all it’s not responsive well for mobile devices. not all the section. top navigation links supposed to turn into menu like when screen is not wide enough which is broken.
- The list about the member family, I think it could have less margin in mobile view could be better.
- The episode table/grid data also breaks mobile layout by forcing the browser scroll horizontally, you may turn each row of 4 column, into row of 1 column and place the text in one container. I believe you can.
And some suggestions,
- You may override the default link color(which is blue) to something else that follows your theme colour scheme. you can override it using
a:link,a:visited, anda:hover(anda:action) rules. - About the source link(wikipedia pages), If whole article was from wikipedia, so you may state at the end of the page that you got data from wikipedia(no need for each section)
- But if some data were from other sources, you may place some superscript inline link after each section like sample[0] (
sample<sup>[0]</sup>) and at the end of the page specify each section number has referred to the original source. - I would also place a bottom border for the top fixed menu too, and more space between links.
Overall I like it, please fix the issues one by one, and it will be great.
Keep going on great work, happy programming.
Thanks for your extensive feedback!
I’ve tried to solve the issues. I hope now it’s better for smaller screens.
The navigation links i couldn’t turn into a menu, instead of that i displayed in not inline. Could you explain me, how get a menu?
O yes, now much better for the mobile view, especially the top links, you may just add more space between them, hard to tap on exact link when they are so near each other.
One small issue could be the top nav in mobile, becasue it needs more space, it waste some space always(especially it’s fixed, and always top there) You may not make it fixed, or go for toggle forma like (check this for example, try to resize the preview pane to see what happens)
Also take the table/grid data section serious, go for a better option for that part, no rush, try to make it great!
keep going on great work, happy programming.
I solved the issues in an other way, so it’s more responsive.
The grid should now work an phones better, too.
Check it!
Grid looks better now, but try to go for single column approach, this is may be too much becasue sometimes servers decide how to response based on client device.
The nav bar now is broken in mobile when you scroll. Also the first element is center aligned, while others are left.
I just checked the code, and you marked the class for into element as fixed, but the others are not fixed, this is causes the scroll issues.
try to do the manu as the link provided previously, don’t rush, be patient, try to make it great.
Keep going on great work, happy programming
Yeah! I’ve solved the grid being responsive as you described. my problem for a long time was, that i still had 4 columns in the output although i had only 1 column in my media-query. the reason for that was, that i had spaced two columns and two columns for the row with the film. 
Now it should be responsive enough for all viewports!?
The thing with the nav-bar: your example doesn’t work without javascript or bootstrap, right? I want to solve this project with plain html and css.
So i fixed for smaller screens only the line with “intro”, so it takes less space on smaller screens. when you scroll down (or jump down with one of the links) you see just “intro” for going back to the start of the page.
intro is centered (and the others left), so you don’t see “text-over-text”.
smart solution or not?
About the grid, let’s try something(my suggestion)
The whole grid container hosted by a div with id episode-guide, good.
Then it has child as grid cells, which each one has class grid-item.
My suggestion is, you host each row with another div, so inside the container grid div(episode-guide) you have another div as row, and each row has 4 element(div) as cells(current cells)
For the desktop, you may go like the current view in desktop (4 columns in each row) good enough.
For the mobile, (as the media query you already added, good), you set the column to render as inline(simple text), then a row goes like a simple row with one column, this will very good!
Another much much much better solution could be about toggle-able row in mobile. You set a title for each row, and hide other elements, when user tap on it, toggle(show/hide) the other columns at the bottom. This needs some js(but very easy) coding.
For now go for fix the menu items at the top, go for the hubergur like menu I provided the sample link previously.
leave the grids for now, later as you started js version for toggle-able content, we would go for another great progress and update.
Keep going on great work! very good progress, happy programming