Prod Landing Page - Offset Question

Project Feedback
#1

Hi,
To compensate for my anchors putting content under my nav bar, I added offsets for each section. They work perfectly for Features and Pricing, but my iFrame in the How It Works section still goes under my nav bar. Might anyone know how I can fix this?

Also, today CodePen is not showing my icons. Not sure what that is about. Assuming it’s a CodePen issue because the icons were showing up last night and nothing has changed in my code. Additionally, codepen keeps removing the test script for FCC. What the heck. Has happened three times today.

I tried pasting relevant code pieces but the forum wouldn’t display it. If anyone can tell me how to properly paste code I’ll paste the snippets. My bad. Sorry I cant figure that out at the moment.

Here is the project:

Thanks for your time.

#2

Your <div> are really messed up. I’d look at those first if I were you and it might resolve itself. Run your code through this validator and work it til there are no more errors. Because you Copy/Paste from CodePen, you can ignore the first 3 errors on the validator.
W3C Validation

1 Like
#3

Thanks for the reply. I ran it through W3C validator but it didn’t catch any open divs (surprising since I have a bad habit of missing closing divs). Removed the container div from the section completely just to test and it still isn’t adding the offset to that one section. Any chance you spot something else I could have missed? Here is that updated section code:

Blockquote

<section id="howItWorks" class="offset">
  
   <iframe
    id="video"
    height="315"
    src="https://www.youtube.com/embed/YVG1U-faqHY"
          
    frameborder="0"
    allowfullscreen
  ></iframe>
</section>
#4

Yea, I can’t figure it out. I noticed you have a lot of extra CSS media queries that make it hard to navigate the code. Like multiple for Max-Width 650. Group all that into one query for 650 and whatnot. Honestly I only use one or two queries max for small/large or small/mid/large.
Here is my Technical Document where when the screen is smaller it has the nav at the top and clicking the jumps doesn’t cover the section heads. Maybe taking a look at that will spark an idea for you?