Project 3: Product Landing Page (Queries)

[alok.v.marathe]

Thank you for suggesting this.
It worked but the only problem is that the links don’t have spaces between them.
Here is a Screen Shot:

[jwilkins.oboe]

You can try space-around, space-between or space-evenly depending on your preference.

justify-content | CSS-Tricks

[alok.v.marathe]

So, this is what I came up with:
https://codepen.io/Marathe07/pen/gOweZzG?editors=1100

The video is hiding behind the header.
How can I change it?
And also the Navigation tags are below the image which I want collinear.

[codely]

@alok.v.marathe

The video is hiding behind the header.
How can I change it?

In the #header-img
change the height to some 15px to 10px

[alok.v.marathe]

I did it, but the Ferrari logo is becoming flat.

[codely]

Give the Logo height and set to some 15 to 25 px

[alok.v.marathe]

It’s becoming too small.

[codely]

Give the px, which ever sets your need.

[alok.v.marathe]

And also the navigation buttons are hiding the video.
They are below the image, and I want them besides the logo.

[alok.v.marathe]

Yeah, so I took 60px.

[codely]

#nav-bar {
  font-size: 5px;
}

And you need to decrease the height of the nav-bar image.

[alok.v.marathe]

When I do this I am geeting this:

But, the navigation links aren’t moving.

[alok.v.marathe]

If I have include the navigation tag inside the header, shouldn’t the links move with the height I take?

[codely]

yes. try it and see @alok.v.marathe

[jwilkins.oboe]

I created a new topic and moved the discussion here since this is an unrelated issue than the codepen technical difficulties.

You can change the title of the post if you want.

My main piece of advice is to use em or rem for font sizes and percentages for width and height.

Because right now you are making all of these changes but it is looking different on the various screen sizes.

It will save you a lot of headache if you don’t hard code in pixels.

[alok.v.marathe]

@jwilkins.oboe

I created a new topic and moved the discussion here since this is an unrelated issue to the codepen technical difficulties.

Sorry about that.

So, I have done the following changes in my code and the image and nav-links have been aligned.

Fork Me! FCC: Test Suite Template

Now the problem that remains is the video.

It’s getting hidden behind the header.
How can I change it?

[jwilkins.oboe]

Yeah you could mess around with margin for the video.
Something like this

#video {
 margin:100px auto;
  display: block;
}

But there is a bigger issue.

You have a lot of elements nested inside other elements that are overly complicating the page when it doesn’t need to be.

For example:
<h1><title id="title"><p>Your dream car: FERRARI</p></title></h1>

You could just have an h1 because right now it is not displaying on the page.

So, I would comb through the html document and remove any unnecessary nesting.

If you just keep the html structure simple then it will make styling way easier.

[alok.v.marathe]

@jwilkins.oboe

#video {
 margin:100px auto;
  display: block;
}

Thank you so much. This worked!
But I got one more problem.
The header of the document is not moving.
I tried using align=" center" but it isn’t moving.

[jwilkins.oboe]

So there is no align center but rather text-align, or align items, align content.

But the actual header won’t really move because it is taking up 100% of the width. So you won’t really see a change anyway.