I’m currently doing the Product landing page project. I added all the content that’s needed, but still got some styling to do. I could turn my project in as it is, but I think I should learn the styling needed, to make the page have the same features as FCC’s example page.
My project’s codepen is https://codepen.io/badmankali/pen/ExvwEev FCC example project is https://codepen.io/freeCodeCamp/pen/RKRbwL
What I need help with:
I need to create a header/nav-bar like the example’s, where it has a height block feature that covers whatever is scrolled is under. When I set a height for #header or #nav-bar, the logo size is strecthed. And I need to make the nav-bar’s links move to the right side of the page.
The three elements in the features section of the page need to have the images next to the title and paragraph, like in the example. I remember working with something that was like this in the challenges, but I couldn’t quite work out which challenges it was.
The three elements in the pricing section need to be centered (like in the example page’s) but won’t even though I state #pricing { display: flex; justify-content: center; }. Also, the space above each of the price-box’s h3 element needs to be removed.
I would suggest you look at the code for the example project and learn from it. Then take that knowledge and apply it to your own project.
The fixed header needs width: 100% and a background color if you want it to be full width and cover over the body content. The fixed element will not be full width by default and it is also transparent. You also want to set the left and top offset to 0 as well on fixed elements like that. For the position of the nav you can use justify-content: space-between (on the header) or give either of the two child elements an auto margin to the correct side (for the image it would be a right auto margin, for the nav it would be left). You probably also want to add align-items: center to vertically align.
You can set the #features section to flex-direction: column and set each of the child elements to be a flexbox container as well. It will require an extra container for the text (h2 and p) so they stack. I would suggest you give the #features section child elements a class so they can share the same layout styles and not use the id you have given them. The images will be affected by flexbox, setting align-items: center should fix it.
Not sure what you mean by centering but you can add a max-width and an auto margin to the #pricing container. The space above the header is the default margin on the h3, you can remove it using margin-top: 0
Thank you so much for this. I checked out the example’s code before writing this post, but I couldn’t figure it out and reverse engineer it like I wanted to. The code is a little too complex for me to put it into context and make sense, but I’ll make a harder attempt in the future.
About the header. I did as you said and it all worked out. To add some space between the links in the nav-bar, I stated margin-right: 120px;. Is there a smoother way to achieve this space?
Wouldn’t I need to set the flex-direction to row, to make the image and h2 & p stack arrange next to each other? With the h2 & p stack having a flex-direction: column arrangement.
What I meant by this was, the three boxes, with each their own pricing, need to be placed closer to each other, like in the example.
The space above the header was solved by using margin-top: 0, thanks. I thought I had tried this but apparently hadn’t.
A new problem, the email submission form at the top is now covered by the header, how do I off set it to be placed lower? When I try with different position-posibilities and a top-off set, it ends up in the side of the page and such. Should I set a margin-top?
I’ve looked through the example’s code but I can’t make much sense of it.
I’m REDOING the third project now. The first time I did all the projects I copied and reverse engineered as best as I could just like you have been doing, now I’m handing in slightly more finessed work (pats self on back).
You’re doing a great job for your first time. I think you also deserve a pat on the back Keep it up
You can make the nav a flexbox container and use flex properties like gap and/or use a space distribution method (justify-content). For the space distribution to work you will have to give it some width (use % value). I would also suggest you give the links some padding so the click area is larger (which helps on mobile devices).
I just meant for the section container it would need to be a column, that is if you want it to be a flexbox container so you can use properties like gap for example. It is a bit hard to put into words without showing code when it is something more complex like this layout. So I will just post some code.
Code example
<section class="features-section" id="features">
<div class="features-content">
<img class="features-images" id="strength-image" src="https://i.imgur.com/D9mwWhe.png">
<div>
<h2>Strength</h2>
<p>Our yarns are the strongest you can find. No matter how much you play with them, they won't break.</p>
</div>
</div>
<div class="features-content">
<img src="https://i.imgur.com/O08XC5B.png" class="features-images">
<div>
<h2>Fast shipping</h2>
<p>We promise you will receive your yarns within a day of purchase. We know how much you crave to play.</p>
</div>
</div>
<div class="features-content">
<img src="https://i.imgur.com/b7zHUYr.png" class="features-images">
<div>
<h2>Quality assurance</h2>
<p>Your yarn will be in mint condition without a single hair missing. All yarn balls have been meticulously inspected.</p>
</div>
</div>
</section>
.features-section {
display: flex;
flex-direction: column;
gap: 2rem;
max-width: 860px;
margin: 0 auto;
}
.features-content {
display: flex;
align-items: center;
column-gap: 2rem;
/* reset the text-align */
text-align: left;
}
#strength-image {
width: 55px;
/* because the images are not the same size */
margin-right: 1rem;
}
What I said should work for that. You can create the space between the child element in different ways (again gap or space distribution) but the auto margin you have now works as well.
Code example
#pricing {
display: flex;
/* You might want to manually switch to column instead of wrapping */
flex-wrap: wrap;
gap: 2rem;
max-width: 860px;
margin: 0 auto;
}
Yes, a margin-top would work. You will also want to look at scroll-padding to offset the header height when navigating using the links (otherwise they won’t land correctly on the sections). But it doesn’t really matter right now because the vertical height of the sections and total page height isn’t large enough to really see it.
Thank you so much, everything worked out. I wanted to see the effect of your code regarding the second issue, so I copy pasted it into my own, but forgot about auto save, so I was stuck with it. No problem though, I read the code and understood completely what it did.
So thank you so much again for taking your time to help me, if I could buy you a beer I would.
Keep it up