Product Landing Page CSS Help

HTML-CSS
1

Hi everyone. I just finished all the HTML parts of my project. The only tests it fails are the second and third layout ones. I was able to use code from a challenge to complete the first one. Can someone look at my work and maybe help me with the CSS part? I’m really not sure how to do the CSS without vision. My code so far is here. I think I can do it if someone could just give me some hints as to what values and attributes would look good.

2

Let’s try something simple. This CSS will move the nav links to the center by default and then move them to the right of the screen at screen sizes of 640px or less. I think the media query might be a little confusing, I know it can be for people that can actually see it.

  1. To the #nav-bar selector, add the following CSS

width: 100%;
display: flex;
justify-content: center;

The selector and styles should be as follows.

#nav-bar {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  display: flex;
  justify-content: center;
}
  1. Underneath the #nav-bar selector, add the media query using the @media rule.

The media query is as follows.

@media (max-width: 640px) {

}
  1. Inside the media query, we now add a new #nav-bar selector with the following CSS justify-content: flex-end;

The media query, selector and style should be as follows.

@media (max-width: 640px) {
  #nav-bar {
    justify-content: flex-end;
  }
}

Hopefully, that made some sense if not just ask.

1 Like
3

While we are at it, let’s also fix the logo.

  1. Change the logo image source to the below URL:

https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg

  1. Add a selector for the image and set it’s max-width to 140px

The selector and code should be as follows.

img {
  max-width: 140px;
}
1 Like
4

Thank you so much for your help! I just finished the CSS you gave me and changed the image source, and all the tests are passing.