FCC Product Page help

Code Feedback
1

https://codepen.io/ITSDUCKY/pen/MWJMzXN

I’m trying to figure out how to get all this into the navbar
and if how to center company name.

2

I’m trying to figure out how to get all this into the navbar

I imagine that youre talking about the navbar, the img and the text that comes below the image.

In my view you can everything inside the nav element, or use your “design-name” div as a wrapper. I would also recommend you to use display: flex; for the element the you choose to be the wrapper;

and if how to center company name.

If you define the display as flex, you can then use justify-content: space-between, I’ve tried and automatically centers the name. This is not the only way of doing, but in this case i think that is going to work really good;

#design-name {
  display: flex;
  justify-content: space-between;
}

hope that this helps you;

3

Im trying to get "home, about artwork , contact in the orange bar nav bar

4

I made a correction in my first message. Try read and see if works the solutions (with code) that I gave. Also i don’t know if that’s a correct way of having this but the text ECLECTIC L CAT is loose on the div element (usualy i see on a p element o a header).

1 Like
5

Thank you. Do you know how I could move ECLECTIC L CAT to the left closer to the img and still adjust the font-size without change the size of the nav bar.

6

Since you didn’t make any change (or maybe forgot to save), I would put the close tag of <div id="design-name"> after the ECLECTIC L CAT . And put

  display: flex;
  justify-content: space-between;

On the header instead of put in #design-name.

Also, try to understand my suggestions instead of just copying (if you aren’t already doing this). Because you will have to change it in the future, and if you just copy is gonna make harder for you to understand in the future.

1 Like
7

I’ve looked up justify-content. I’m guessing I’m not going to be able to move or resize ECLECTIC L CATusing justify- content

8

justify-content is use as a flexbox property to define the alignment along the main axis. I would suggest you to put ECLECTIC L CAT in his own html element and move and resize directly.

1 Like
9

Thanks for all your help. I’m not understanding what to do. Did you get this far just from FCC and are their any videos or other site u would recommend.

10

Did you get this far just from FCC and are thier any videos or other site u would recommend.

I got as far by making many mistakes. I had to remake this specific challenge 3 times, because i got really confused by how the top-nav-bar worked. In fact, I reseted my progress from FCC and got back from the start to make sure that i had understand properly.

Did you get this far just from FCC and are thier any videos or other site u would recommend.

Since this challenge requires flexbox, I’m gonna suggest this links explaining flexbox.

Also, one thing that i didn’t understand and stopped my advance was inline vs block elements. This link may help you.

Btw. the original issue was because you’re using float on the ul and li elements. So i guess that you also need to understand float vs flexbox, so this may also help you.

Don’t give up. And if is needed, take a little time off of the challenge, fresh up and then come back.

1 Like
11

I think thats what ill do too. Thanks again

1 Like
12

I’ve edited the post to provide you some links. hope that it helps you. :wink:

13

you asked a question about making the logo stay close to the image logo. I think you should put the h1 element and the img together in an element and use space-around for the justify-content instead of space between.

1 Like
14

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.