Build a Product Landing Page - lots of problems; tackling one at a time. First - disappearing web page!

Build a Product Landing Page - lots of problems; tackling one at a time. First - disappearing web page!
0
#1

My page is ugly as sin. But that is the least of my concerns right now. I am running into a lot of other technical issues that I need to tackle one at a time.

First:

  • When I click on the “email” box, the whole page just disappears. Just by putting my cursor in the box. Any ideas’?

All code can be found here:
https://codepen.io/sabahatiqbal/pen/EpPvZb

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page

#2

Take a look at your links for facebook google and gmail you have opening a tags but no closing a tags. So if you inspect your page (using developer inspect) your text field for the email is linking to facebook and i guess crashing your site.

-Nao

#3

Wow yeah the whole page disappears…because you have an unclosed a tag. making your whole page a link. Check your social links and make sure they have </a>

#4

Thank you @NaoG and @Tirjasdyn. That worked perfectly.

My final technical problem is related to:

User Story #15: My product landing page should utilize CSS flexbox at least once.

My code is failing this test case but I definitely have it:

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

And this is a link to entire CodePen:

Thank you in advance.

#5

Your project will ONLY render as you want with screen widths between 1200px and 1600px. All of your CSS is just a media query defining how your page should look for devices between these widths. When I view your page on a screen width not in this range, it looks like below.

image
image.jpg1548x850 208 KB

P.S. The reason the test is failing is because it is not expecting to see the flex property in a media query as the only place in your CSS. If you add the following before the media query definition, it should pass the test.

.flex-container {
  display: flex;
}
#6

Thank you @randelldawson. All the tests are now passing so yay!

Now to fix all the poor formatting.

First, when I click on the links in nav-bar, I am able to scroll directly to the relevant spot in the page but since it brings that spot to the top of the screen, it ends up getting obscured by nav-bar.

I read somewhere that the way to overcome this was to set margin-top to the same height as nav-bar. So I did that for the element with ID, “main”. To no avail.

Help appreciated.