Help with a few problems Product Landing Page

I have a few problems I can’t figure out.

  1. My background pictures don’t show up for other people but I see them on codepen. Links are from imgur. I did copy image address on the links to get the url.

  2. When I click some of the navigation links up top it either doesn’t go exactly to where I want it to go and instead covers the top part. I think maybe this is because of my navigation bar covering it? I’m not sure how to fix it though.

  3. I can’t figure out my media query for my background picture. I want it to shrink so the whole picture still shows but it seems to just cut the image off?

Link to my project: https://codepen.io/ConnieQ/pen/gqjMMv?editors=1100

  1. Not and expert but others have had issues with hosting images in imgur and others not seeing them. Do a search on hosting images and fcc for possible solutions. You’re not the first.
  2. Yep, the navbar is covering it up. Think about padding.
  3. The challenges are done in an order and if you did the tribute page and he survey page then you did cover responsiveness. If not, review the Responsive Web Design Principles section.

For the image not showing up, check the console. Your getting an error:

GET https://i.imgur.com/MJL743a.jpg 403

Maybe look into the cause of this.

Error 403 is “Permission Denied”. imgur specifically forbids deep linking (linking directly to images). Photobucket is known to work, and github pages is also popular for hosting project images.

What makes the problem really insidious is that if you’ve viewed the image on imgur before, you’ll see the image just fine. Clear your cache or reload with shift-F5 and you’ll see what everyone else sees: broken images.

I’ve had good luck hosting my images in a GitHub repository. I right click on the image to copy image address and use that. I have to use Chrome to get the image address, though. Edge won’t do it.

Passes all tests for me!

Fixed the image problem by using tinypic instead :).