Feedback on Product Landing Page: Any Suggestions on Where to Use CSS Flexbox and Media Queries

Edit: I’ve had people tell me there was no content, so I guess my project wasn’t saved. I just fixed that. Can anyone who looked please look again?
Hi all. Blind person here working on the product landing page project. I’ve passed everything but the last couple tests. I know how to do CSS Flexbox and media queries but I’m not sure what would look good. Can anyone look at my work so far and give me some ideas?

Hey @Living4God1991. I can’t image how hard visual design would be without being able to see what you’re working on. There’s one significant problem with your landing page (other than the tests failing). Your header image is covering all the content of your page. It’s huge and takes up most of the window. When I remove it, I can see all the content. After that, what I see is basically a bunch of content without any style (CSS). Here’s what it looks like. The navigation links at the top are all the default style for a link; blue, underlined, kind of small, no margin or padding. The first one hugs the top left of the window and the rest are just printed to the right of it, one after the other, all hugging the top of the window. The rest of the text on the page is all the default style; black, the default font and size, and left aligned. The lower numbered header elements have larger font. The video and list’s look pretty decent. The form at the bottom has a few issues. I see a name label on the left of an input. The input is too wide, taking up most of the width of the page. The email label is shows up on the right of the first input, and not the left of the second input, but only what then window is large. The second input is also too wide. The check boxes below that are centered with respect to their parent label elements and the actual labels for the check boxes are on the far right. The submit button takes up most of the width of the page, as well. On the positive, your HTML looks formatted and structured to near perfection, all that’s mostly missing is the CSS.

I am used to codepen so I modified your project there. Here’s a link to what I came up with. I found a new logo for you since your other one had a white rectangle background. The one I found is a generic CPAP icon with a transparent background. That’s the only HTML I changed. The rest is all CSS I added. I left comments in the CSS area about what I added. After fixing up the nav and a few other things, it was looking pretty good, so I left it there. All of the content is still left aligned and the default size and font, so there’s certainly still room for improvements. One of the things I added was the use of flexbox in your nav because it’s awesome. This passed one of the tests you were failing. There’s still one more faliing. Let me know if you have any questions.

Edit: I just noticed that the wall color of the room in your video is the same color as the icon I found and the background color I added.

2 Likes

@moT01 thank you so much for your help! Unfortunately, I never know when or where to use CSS Flexbox since I can’t see the page. I also tend to keep the default font, size, and color since I don’t know what fonts and colors look good, but if you have any suggestions, please let me know. I think I can manage the media query. Maybe I can just have the font be smaller on smaller devices or something.

1 Like

I just created some media queries to change font sizes. I left the font and color alone since I wasn’t sure what to use. Here’s the final result. Be sure to try resizing the viewport.

It’s looking good @Living4God1991. Usually, I think people use the width of the viewport instead of the height for making media queries. I suppose it works either way, but that’s what I almost always see.

Some additional feedback: The text is all responsive and wraps to a new line when you shrink the window, so that’s looking good. If I make the window real narrow, the video doesn’t shrink with it. So a horizontal scroll bar gets added because the video is wider than the width of the window. The nav links wrap to a new line, which is fine enough for a medium sized window. But if you make the window real narrow, the nav links all wrap to their own line, extending below the height of the nav bar. Usually, sites use some sort of “hamburger” menu for this. Basically, a single button that opens a menu with all the nav links in it. And there is one more thing with the form. The labels aren’t always next to the input they’re for. If you add a display: block; to all the label elements, they line up pretty good.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.