Product Landing Page help | 3 issues

Hi, I can’t seem to manage to fix these three issues. I usually just end up following youtube videos step by step for these and end up copying a lot from the sample provided and youtube. but this time eventhou I did do that but to a much lesser extent. but I want to at least see this one to the end and not just some botched pass.

#1 The Navbar blocks a portion of the page.) I tried using the overflow: hidden;
but it doesn’t do anything.


I even copied the exact same navbar code from the sample code to my header but it still keeps blocking some text.

#2 Can’t place the text beside the image)
It just doesn’t look good at all!

#3 The products are not centered properly and all different sizes
when I try using display:flex for this. it just looks very bad and off.

One last thing is also the hover effects, I really like the hover over the products and the submit and email areas. was really fun learning that part. I’ve did the shadow effect to the navbar as well and it honestly doesn’t look good.
any other cool hover looking tricks/effects that look better. will also be nice

I have already passed this test but am still trying to fix these issues.

Here is the project: https://codepen.io/trm900/full/poEEQBQ

I have seen your code and here is my conclusion

You should avoid looking for projects solution on youtube
You have to practice some basic concepts like flexbox and grid
The HTML structure is quite off
Go through box model concepts

I dont want to sound like a pro or something , I have gone through the same problems and I know what you are lacking …things will take time dont rush to solutions so fast , rather make your fundamentals better .

If you feel stuck somewhere and you feel like quitting , you can mail me at sk649280@gmail.com

1 Like

Thank you for the feedback, yes I will be sure to revise these topics. I end up revising them almost everytime I start coding then go on hiatus and forget everything again and repeat the cycle. :pensive:

As for this, can you give an example? is it like the whole formatting or like am using incorrect syntax? (am sure most of it is bad, I just want to know what I should be working on when you mean the structure unless you mean everything which is also probably the case)

I am not talking about the whole formatting , things can be a lot better ,
Learn about semantic elements and try to use them wherever possible .
Mail me for so that I can help you personally

1 Like

How about you take this hint:
instead of making the header fixed make only the elements in the header fixed . This will prevent the topic below to come up hide behind it.

For the photo and the text thingy try grouping them together and giving the the text

align-self: center;

Note : this doesn’t necessarily mean that it works . you will have to try quite a bit of things.
Note : You forget to close the nav opening tag.

Hope this helps .

1 Like