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

HTML-CSS
#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

1 Like
#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>

1 Like
#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
image1548×850 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;
}
1 Like
#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.

#8