Product Landing Page - Bat Products Inc

Hello everyone,
I am new to FCC and am loving it. The first 2 challenges I knocked out in no time, but truth be told, they will not get any pretty points. This is my third challenge, and I think I did a slightly better job, although I wouldn’t hold my breath either.

This is the Product Landing Page, let me know what you think:

Challenge code

Let me know if you find something breaking that I could fix, or maybe something that can be improved. Thanks!

2 Likes

Nice looking page. Like the phone number. Keep the anchor below the header when using nav-links. Offset it by the height of the header with either margin or position-ing.

Looks good! Did you fulfill all of the 16 challenges?
I like how you’ve commented everything on CSS saying what it does, I should try this as i’m often confusing myself when I go back over it!

Thanks! I definitely lost that battle trying to offset the anchor target, so it wouldn’t end up half covered by the fixed header. I am doing something wrong and haven’t figured out what…

I think it’s likely to be solved with before or after, but haven’t been able to make it work… am I close?

Thank you! yes, all 16 completed. I have to confess the comments came during the debugging, because I couldn’t remember what was supposed to do what… once in place, I have to say they did make everything easier to go through.

Try this exercise is a new pen. https://www.caktusgroup.com/blog/2017/10/23/css-tip-fixed-headers-and-section-anchors/
After it works try transferring over your layout method a little at a time until it breaks. Maybe its flex column. I can do the margin method without flex but haven’t put it into your layout properly, but I’m new to flexbox and grid.

Hmm, try removing margin-top and add top padding to your products class.

NAILED IT!!!
That was a great article! And the solution is not that complicated, here it is if you want to take a look https://codepen.io/McFlacken/full/YmGNqR, the steps are quite easy:

  1. set a parent container that contains (as siblings) one phantom anchor and the target you really intend to view. It has to be a positioned element, so the “phantom” tag can be positioned relative to it.
  2. set the anchor tag with “&nbsp” inside and position it “absolute” to parent container and with a “top” offset = to the height of the header that you want to avoid.

Notes: I only fixed the first nav-link “Products”, the phantom anchor tag has a red solid border so it can be seen, the parent container has a red dotted border and the label that I want to not be covered by the header has a yellow dotted border.

2 Likes

Thanks, I did a lot of fiddling around with the padding and the margins and nothing seemed to work.

I am sure there are many ways to solve this. As per the post above, I finally managed to get the nav-links target to display as I wanted. I found it easy to fix once I gave borders to each element and could actually see how they behaved with each CSS change I made.

Wonderful. Glad you found a solution.