Product Landing Page Feedback

Code Feedback
1

Hello Wonderful Campers

I’d love some feedback on my product landing page project and some help with a few specific things.

  1. When viewed on mobile my nav bar becomes a column, but it extends out of the header.

  2. The centre yellow guitar image is a bit smaller than the other two, which is fine, but it means the price text “£400” isn’t always in line with the other prices on either side depending on your browser size.

  3. The video is sometimes an odd shape. If I give it absolute dimensions, it looks wrong on mobile and falls off the edge of the screen. I’ve given it relative dimensions using vw, but now it seems to stretch to a strange ratio in some instances.

  4. I wanted to use font awesome for some icons - do I need to sign up to get it to work as when I tried, nothing displayed.

There are probably other things that are wrong too or could be improved. It’s passed the test, but I’m not fully happy with it so please give some constructive feedback.

I tried a few things to fix the above problems and I was tempted to grind out another hour trying to fix these issues on my own but realised I need to get used to asking for help more. Any and all feedback is much appreciated.

2

Hello!

I don’t have the time to debug all of your issues, but at least issue one:

Simply reduce the padding and font-size of the nav-links in your media query, also reduce the navigation height to 75% in there. That will make your mobile menu look better.

With just three links, you can actually align them in a row on mobile if you reduce the dimensions of the logo. For navigation links in a column hamburger menus are the better way.

3

Cheers for that. I’m not sure how to make hamburger menus yet, so I was just trying to make it work as best as I could.

4

You can achieve this with just CSS:

Here are a 10 examples to try out:

1 Like
5

That’s great. I don’t now why, but I thought I’d need to know JS for menus so I wasn’t overthinking it right now.

6

I’ve figured out 2. And 3. Using flex-grow and max-width.

Really simple once I’d had walked away and came back to it. :face_with_peeking_eye:

1 Like
7

Just to clarify here, you actually do need JS to make an accessible hamburger menu since HTML does not offer a native element to do this (the details/summary elements are unfortunately not good enough). These CSS-only menu examples work for people who can see the page, but they aren’t accessible for people who are listening to the page with a screen reader.

Please go ahead and use a CSS-only solution for now since you don’t have JS in your toolbox. I just wanted to let you know that it isn’t a complete accessible solution and you wouldn’t want to use a CSS-only solution in real production code.

8

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