Landing Page project issues: lists and aligning elements

1

Hello!

I am stuck with a couple things in my FCC Landing page project:

  1. I am trying to get the lists in the grey boxes (at the bottom of my page) stacked vertically. They are currently aligned left to right. I think my CSS nav bar list coding is affecting lists at the bottom of my page.

  2. Also with the grey boxes: I would like them to be aligned horizontally.

Here is the url to my Landing Page project:

Thanks so much!

Steve O.

2

Did you fixed it? I didn’t found any of these problems.

3

I did fix it, thanks!

Now I’m wondering why there are two tests failing:

#Content: 11. Within the form, there is a submit with corresponding id=“submit”.

and

#Layout: 2. My product landing page should have at least one media query.

Are you interested in helping with this?

Thanks a bunch!

Steve

4

I see you have an extra closing form tag in your html. If you remove that one of the failing tests will pass. The input needs to be inside the form.

The other test is failing because you aren’t implementing the media query correctly.

It should not be nested in another CSS rule, you also need to target an element inside of the media query.

For example:

 @media (max-width: 650px) {
      .container { 
          margin: 0 auto; 
       }    
  }

Hope that helps!

5

Thank you so much, Lisa!

Do you happen to know why (after I deleted the extra closing form tag) the submit button jumped up to the same row as the email input field? I would prefer to keep the button below the input field.

Thanks again!

Steve

6

You have a few problems. You should not have anything other than an LI element as the direct child of a UL element. You’re breaking this rule a few times. These elements can be nested inside of an LI, but I don’t think you want to do that either. LI elements are meant for lists, for items that are meant fo be closely together.

I forked your project and tried to simplify the header and form area for you so you can compare it against what you have. Check out this pen https://codepen.io/anon/pen/WYvgpE

Good luck!!

1 Like
7

Thank you Lisa- this is so awesome! I’m going to take a closer look tonight!

Steve

1 Like