I have finished all of the RWD projects to the point where they’re passing all tests, and almost all of them look like webpages, but I want them to look and function better. Any and all feedback is appreciated.
Tribute Page: GitHub - GrizzlyGinger/fcc-rwd-1tp: FCC Responsive Web Design Project - Tribute Page
Survey Form: GitHub - GrizzlyGinger/fcc-rwd-2sf
Product Landing Page: GitHub - GrizzlyGinger/fcc-rwd-3plp: FCC Responsive Web Design Project - Product Landing Page
Added since new users can only add 2 links.
suggestion for the Survey Form: take a look at how it renders on large displays, the text boxes, drop downs, &c. may be wider than you’d like them to be. Probably an easy fix by setting a max width to the form container – the screen cap I’ve attached here shows how it looks on my screen (width 1920px)
Thank you! I used max-width so much in the Product Landing Page I forgot about it for the Survey Form. It’s looking much better now. Now I just need to tweak the color palette and line height a bit and find a better font.
speaking of the product landing page, regarding the fixed navbar, you may want to look at the CSS property scroll-padding-top for the html element
You answered a question I didn’t even know how to ask. Thanks again!
I like the design. very nice.
Just on the product page, in my opinion it would be more user friendly and aesthetically pleasing if you d take out some margin and/or paddings of the sides upon narrowing the screen width. There is relatively a lot empty space in mobile and tablet sized views.
Do you have any advice on how to do that? I’ve been looking at implementing media calls, but have been a little confused on how they work.
Take a look at the containers and individual text blocks.
When I use my browsers inspect tool I see for example in the About class paragraph that you put a padding of 25px and also a max-width of 90%. So both are here reducing potential space for text. You could take out take max-width property, and maybe reduce the padding a bit. Also remember the various padding specifications (padding-top or padding-left etc, padding-block for both top and bottom or padding-inline for right and left). So check out the paddings, margins and max-width properties you have used and play a bit with it and see what suits you.
Im not sure if any media queries are necessary here. It seems to me there are 3 layers creating some kind of border. Maybe the you can give up on the background when the screen gets smaller by losing the margin on “sections-class” and stick to the overlay and the padding of the text and and other elements within the dark grey boxes.
Hope this helps. Im fairly new here and still busy with my last CSS project and wouldnt want to give you the wrong info. Maybe others have some more insight.
But its good to struggle a bit with it yourself I think, gives you the oppertunity to track down the errors.
Today i worked with alot of “em” and “rem” units as an additional way to make things responsive. For example make borders grow/shrink depending on font size, which grows and shrinks. That requires media queries tho… Because the About-class paragraph looks good in small screen without the extra padding but skinny when the viewport is bigger.
Take a look at Kevin Powell on youtube, he dives into all these things with great detail.
Have fun )
When you submit your projects they should be a live version of your projects, not the source code.
For instance the link for the tribute page should be ‘FCC Responsive Web Design Project - Tribute Page’
Some things to revisit;
tribute page
survey form
product landing
I am aware of the link path I would need to submit, just posting the repos for ease of access. 
Thank you for the Validator link and the reminder on accessibility, I’ll review that section before I do anything else.
I’ve been meaning to dive into em and rem and love Kevin Powell’s videos. Thanks for the feedback!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
