Product Landing Page project Questions

Hi,
i’m doing this exercice and i would like some help.
First, at the top in the nav-bar, i think what i did is not good. First, because link are now in reverse.
Then, at the bottom with the 3 divs with price, when i hover, the width change. I tried box sizing but not working or base using from me.
Finally, i would like some help about “responsivness”. For now, it doesn’t have any :confused:

JsFiddle:
https://jsfiddle.net/poca123/hmfpuqvr/

CodePen:
https://codepen.io/pocahontas123/pen/ YYLVWa

Maybe split the following code into two parts:

#nav-bar ul li{
	float: right;
	display: inline-block;
	
	list-style-type: none;
	/* same as header height */
	line-height: 140px;
	padding-right: 100px;
}

Split apart:

#nav-bar ul{
	float: right;// floats the ul container instead of each li element
	list-style-type: none;
 	line-height: 80px; // matches closer to height of logo
}

#nav-bar ul li{
 display: inline-block; 
 padding-left: 100px;
 padding-right:10px;
}

Hi, i’m going to try it ! thx

Hello, i tried your thing and it help thanks.

https://jsfiddle.net/poca123/hmfpuqvr/

https://codepen.io/pocahontas123/ pen/xpzGMP

To go one, i would like some help regarding the responsive part and how to fix it.
Secondly, i did the FCC script but i have issue making 3 steps work althought i have normaly did it right.

12. When I click the '#submit' element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit) that confirms the email address was entered (and that it posted successfully).

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

3. My product landing page should utilize CSS flexbox at least once.

I did:

<form method="get" action="https://www.freecodecamp.com/email-submit">
@media only screen and (max-width: 500px) {
    #div6 {
		display: none;
    }
}
many display: flex;

About responsivess, i can use media queries but i don’t have very good courses only related and focused on this.
For now, i would like that my page stay the same as much as possible (so at a reasonable mobil size). The nav and footer width less a lot while the rest don’t move a lot.

Thx

Hi hello everybody Any one ?

A post was merged into an existing topic: Product Landing Page

Okay, on the email test, try changing the name to “email”. I know it seems a bit redundant, and I don’t know why you have to do that, but you do.

I’m still trying to figure out some of your other tests.

Oh, and I figured out what was going on with my code. Thanks @pocahontas123 pocahontas123

Thx, i will try it out.

I tried and it worked for email :slight_smile: but i still have and error about media queries and flexbox. It’s cerainly an error from the fcc script so i will move on.

2 posts were split to a new topic: Legality of using a logo off the web