I am new to this amazing community and having tons of fun so far. I was trying to start the product landing page project today and i feel i have hit a bit of a roadblock. I have the skeleton of the page made at this point mainly looking at the example code and adapting it. I plan to change the css colors and styles of the buttons but i just wanted to get the skeleton down. here is the codepen.
I am having some big issues mainly around the css of the document. i included some red lines as an imgur album so you can see exactly what i am talking about. I am a designer by profession so I am a pretty visual person
with my nav area (ingredients, story, menu items) for the life of me i don’t know why its not justifying this flex box to the right. I am sure its something incredibly simple but by looking at the example and other peoples attempts at this project i cant see what it is I am doing wrong here. I was thinking it might have something to do with the fact that its all part of one class and i cant modify this area independently? please help i think this is pointing to something fundamental i dont understand with css.
how can i make the space from the icons to the headers centered and have better space between them? right now my text isnt really controlled and just jumbled together
how do i center the text in this area?
Another alignment issue. Not sure why this also isnt aligning to the right here.
I also want to add a big full bleed image of some grazing llamas in the middle but from the first project I am pretty sure i have the know how to do that from the first project. I think most of my issues stem from my beginners understanding of css. I have tried to do my due diligence and research this but I feel i’m getting a bit stuck.
You have position: fixed to your header, and you have applied top: 0 which makes it to stay at the top and now you want it on the right, just give it right: 0, it would move it right, but when you scroll down you can see the contents to the left of header, to fix that give width: 100%, now change justify-content: space-around to justify-content: space-between to make the logo and navigation-bar move - (to the far corner if needed) and apply align-items: center to make items center vertically, then you can apply some padding to your .logo and #nav-bar to make it look better.
The icons are not visible, i think the link doesn’t point to an image, you have to fix that first and to make some space between icon and text block, you can give .icon some padding to the right.
To make the text block along with the icon to center, you might want to apply some width ( Ex: width: 50% ) to your .grid class and give margin-left: auto and margin-right: auto ( margin: 0 auto – shorthand)
For ul you have applied flex and have given some width, which is a big mistake, it will affect all the ul you have in your page. If you want to apply some width or flex to an ul you can give a className or Id to it and use that for styling (Do not apply common props). You can remove the padding and margin which is set default to the ul commonly but not above said things. Make the changes and remove all the flex props you have used for ul and span inside footer and just apply these to your footer
Hi @shnurr,
When I saw your project I was quite surprised of perfectly matched the structure and css of the original project so I went to your code and compared it with the FCC original one. And well, I noticed that the html structure is practically the same (even the classes/id’s names), then I read again your post and saw that you mentioned this:
Don’t do that. You are not making a favor to yourself. Try to build the page from scratch, using what you learned and trying to search how to do what you want it to do. Try a simple page, something small, but all made by yourself. Trust me, you’ll learn way more this way. Just don’t look into the FCC example page and even less, don’t copy paste their code, because you won’t understand how many stuff work and you will miss the point of learning through failure and motivation.
