Product Page Help

Hello campers, While designing my product landing page, I have come across quite a few bugs as listed here:

  1. Can you tell me the reason for the extra margin in the corner:
  2. Also, what are the correct dimensions for the media query for the default codepen editor page…for
    e.g. 1024px x 721px…( both width and height).
    I hope you guys can help…Thanks in Advance!
    Here’s the link:
    Please give your feedbacks as well!:slight_smile:
  1. The extra margin in the corner is due to the fact that you have set a few things to 100vw and because the vertical scrollbar needs some space on top of that, the page ends up wider than 100%. Just change 100vw to 100% everywhere and that issue is fixed.

Generally speaking, you have WAY too much css for just a single page like this because you are repeating yourself over and over. That will make it very hard to make any changes without going crazy. Take advantage of the cascade and cut that way down. Just as a small example of what I mean by repeating yourself: .nm1 and .nm2 have exactly the same content. You can just put the same class on multiple elements - you don’t need one for each.

  1. I am not sure I really understand the second question - your media queries should not be based on the size of the codepen editor page. At any rate it will be different for everyone depending on the screen resolution and size… That said, if you open the developer tools in Chrome and move the split between the developer tools and the main window left and right, you can see the current screen resolution in the top right corner.

Hope that helps you a little bit on your journey. Best of luck.

1 Like

Thanks Faktotum85, well I also figured it out afterwards that the css was too much but I thought of changing or reducing it gradually. And for the codepen question, I totally agree and to be true, the issue disappeared once I added the relevant media query. Thanks again!:+1:

So, now it seems sorted but just one problem and that is internal linking. I couldnt find much important stuff about it, so, im here again…Any suggestions!
Link to page:

What is the problem with the internal linking exactly? Your internal links seem to be working. Are you talking about the navbar overlapping the title of the section you are jumping to?

I would not worry too much about this for now, but there are different ways of dealing with this problem that can be a bit tricky / advanced. There is a nice article here that might help you:

Totally agree, way too much css! For example the submit: hover color and background properties are set in the main css and both media queries. This would be OK if the submit button was different for each media query but they’re not, therefore there is no need to define it x3. Comment out the 2 media queris on submit:hover and see if anything changes!
I did my product page last week and it was such a big learning curve, it literally took 3 days longer than I thought it would! Don’t worry about it, this is the beauty of FCC; you have been given a project to do and have unlimited time. Take your time and learn everything you can!
Also, the best trick I learnt from doing this assignment was to comment out my css line by line at the end of the project. This allows you to see if the css is actually doing anything or not, if not then delete it, if it has a use then uncomment it and move on!

1 Like

Yup, codebarron it was definitely a learning curve and now I realised the need and importance of proper structure and not including everything I know. By the way, thanks for the suggestion, I’ll keep it in mind from the next time.

Thanks again, faktotum85 the article was really helpful and i’m looking forward to implementing it.