Landing Page (Help! Edit)

[msalas2199]

Tell us what’s happening:
Okay a couple of things that my code is doing that it should and I don’t know how to solve or why it’s happening.

EDIT:
Things that are not solved

• The nav-bar that I previously had didn’t pass any of the tests; I don’t know why. So I erased it to try a different method but it’s not working and now I can’t remember what I had before

• As you can see on my site I have a red background-color which I am going to change after I just align everything.

• I need help aligning it, I have watched a ton of Youtube videos explaining flexbox and read CSS properties but nothing is working for me and I don’t know what I did that actually worked.

Obviously more things are wrong on the site but I want to fix this first before I move onto the next problem. Thank you in advance

Things that are already solved

The header is supposed to be the full screen. As you can see it has a white border. That didn’t happen before, it did work. But I don’t know why it suddenly changed to that arrange. Edit: This one is done

Like this:

2. In the Pricing section, the prices are supposed to be aligned horizontally. I tried using CSS grid elements (display: grid, grid-template-column, ...) it worked but not like the sample code. I also tried copying it from the sample code but somehow it didn’t work on mine. Edit: This one is done

Thank you in advance and hope you like what I’ve done so far with my project

My Project so far

FCC: Landing Page

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:82.0) Gecko/20100101 Firefox/82.0.

Challenge: Build a Product Landing Page

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page

[jsdisco]

@msalas2199

1. The header is supposed to be the full screen. As you can see it has a white border. That didn’t happen before, it did work. But I don’t know why it suddenly changed to that arrange.

That white border is the default-margin of the body, setting it to 0 will remove the border.

@msalas2199

2. In the Pricing section, the prices are supposed to be aligned horizontally. I tried using CSS grid elements (display: grid, grid-template-column, ...) it worked but not like the sample code. I also tried copying it from the sample code but somehow it didn’t work on mine.

Maybe it was just a typo, it’s grid-template-columns (plural).

@msalas2199

3. While I’m here I want to ask you how can I make the nav-bar go from transparent to solid.

You can just give the .nav-bar a background-color? Also some padding-bottom.

[IAmRC1]

@msalas2199

While I’m here I want to ask you how can I make the nav-bar go from transparent to solid. In my original design I made the nav-bar 's text white and well… it blends together with the background of the rest of the page hahah. So I thought I could do a solid background on the bar but how can it go from transparent at the header to solid on the rest of the page. (With CSS).

Well @jsdisco gave you the answer for first two, but for this as per your requirement, you want the header to change its background color from transparent to solid on scroll down, isn’t it? For that you need js, it cant be dont with css.

[msalas2199]

Yeah, that’s what I was thinking.
Thank you for answering though

[msalas2199]

1. I made the body margin to 0 and it worked.
2. It wasn’t a typo, it was the property that I used. It got solved by this:

.pricing-container{
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 30px;
}

With repeat(auto-fit, minmax(250px, 1fr));