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.
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.
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>
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.
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.
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.