Landing Page: A helping hand would be great :)

Code Feedback
1

I’m just about finished with my landing page. However, I can’t get the icon section to resize when the screen size is at 600px even when I have a media query in place. The same also seems to happen with my form. I want it to go under the video at the 800px breakpoint.

Any help is much appreciated!

Thanks!

https://codepen.io/andrewcauthorn/pen/axmoEZ

2

Can you add a link to your demo?

3

Yes, sorry. https://codepen.io/andrewcauthorn/pen/axmoEZ

4

I am not sure what you refer as icons section.

Currently the form goes under the video at between 800px to 900px. It’s doing that because the width of the form including the paddings go over the width of the current row so the form is pushed down because it can’t fit in the row anymore.

The easiest solution would be make the container div of video and form a flexbox. And at breakpoint of 800px, I would give flex-direction: column;

5

Thank you, sir! When I referred to the icon section, I was referring to my flexbox. The three boxes don’t stack when resized even when I add an 800px breakpoint and change the display to block. My apologies, in my haste, I explained my issue poorly.

6

You welcome :slight_smile:

First I see no media queries handling 800px breakpoints. They are all 600px. Also I don’t see you styling any of the boxes inside the media queries.

I wouldn’t give your #box-1,2,3 height 50%. The box containers getting cut in half in height. Since you are already giving display: flex to #box-container, I would just give flex-direction: column; at 800px media query to it.

1 Like
7

Do you have any advice on how to make the nav bar stick to the top? I feel like my code is right but I can’t get it to pass: https://codepen.io/andrewcauthorn/pen/axmoEZ

8

You can set it to

#header {
  position: fixed;
  top: 0;
  left: 0;
}
1 Like