How do i shift footer to the rightmost end?


hey! This is my landing page.I’m not able to shift my “Privacy Term Contact us” to the rightmost end.
Also I’m getting the following errors on running the test:

. When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.’

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).

Any help is appreciated.

So first, the shifting the footer. Because you gave the footer itself a padding of 20 px, you can’t easily push its content beyond that. But we can set the padding on all four sides separately:

padding: 20px 0 0 0;

or

padding-top: 20px;

For the when I click a .nav-link button in the nav element message, yeah, it’s a thing.

  • User Story #5: When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.

So you have links in your nav element, right? And you have sections of content on this landing page. The expectation is, when those nav links get clicked, they will take me to that specific section tag on the current page. So Pricing, for example, should take me to the #pricing section. How do you think you make that happen? What should the URL on those pages be, to make them an internal link?

As to that last error, the submit thing, what is the action on your form? That is where the submit element is getting that ‘specific page’.

hey! thanks. I tried both the above code but still footer is not shifting to the rightmost of the page.When I’m writing “footer ul{justify-content:flex-end;}” then it should shift all the elements inside

it is shifting the content of the ul itself to the right side of the ul container. The issue is, I think, that the ul has a fixed width:

ul{
  display:flex;
  justify-content:space-around;
  align-items:center;
  width:60vw;
}

In there, you define a width. Then when you define a CSS rule for footer ul, that rule overrides some of the styles, but the width hasn’t been touched. So the span within the footer is being pushed further LEFT because it’s placed before the ul. If you add a style into the footer ul to override the width (for example, width: auto), it will pull the ul tighter, and move the span further to the right.

Now, as a more general note, are you getting familiar with the Developer Tools in the browser of your choice? The way I was able to find the issues going on with your footer was by using Chrome’s Element Inspector. I can see all the styles applied to any element, and where those styles derive from. I can edit styles directly in that inspector (not change my style sheets themselves, but interactively change the styles), and see an immediate result. It’s a very very powerful tool.

If I were to have one single critique of freecodecamp, it would be that there really needs to be a sharper focus on effectively using testing tools like that. Without something like that, trying to debug CSS an be a colossal pain.

Here’s a decent tutorial on using dev tools, well worth the time.

2 Likes

I was wondering if setting an Id to the footer ul,

    #bottom-bar {
    position: relative;
    right: -39%;
    }