Feedback on Responsive Product Landing Page

Hi, i’ve finished my product landing page and tried to make it responsive. I’d appreciate any feedback on both the design and code.
Thank you
Here is the link: https://codepen.io/Lealis/pen/YzqaKoX

Hi there! I love your color scheme and layout! The only time your content aligns is when I reduced my browser window to 50%. The dollar signs should be in front of the numbers, not behind.

2 Likes

Thank you so much for the feedback! I fixed the dollar signs now but not sure about what you mean by content not aligning can you give me an example?

1 Like

Hi! I like your design very much and you chose a nice color scheme but I think you can simplify your css reset by changing the first couple lines to

* {
    margin: 0;
    padding: 0;
}

instead of

html,
body,
h1,
...,
...,
... {
    margin: 0;
    padding: 0;
}

Plus your tests are failing because your links in the header dont jump to the corresponding section.

2 Likes

codecamp

In the upper right, it’s hard to see your menu. Using latest version of Chrome. Browser window 100%. Font setting to medium as recommended.

2 Likes

Thank you :slight_smile:
I used scss for the project so i think thats why resets show up like it the original code was as you wrote. I didnt have any trouble submitting it to the challenge site i’m not sure where i should test it

I added a margin-top to the illustration div but im not sure if it fixed it completely , when i try to set a max-height it disturbs the image.
This is the new version:

Welcome to the forums @beyzakygsz7. Your page looks good. Some things to revisit;

  • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 15/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • Check that the user has filled in a valid email addr. Throw an error if not.
    • You learned to do this when you created the survey form.
  • The page needs to be responsive.
    • There is a horizontal scrollbar on smaller screens.

When you submit the projects there is no testing done. The tests should be run by you prior to submitting your project.

1 Like

I 'll work on the issues . Thank you for the feedback and help.