Tell us what’s happening:
Okay, I made it to the product landing page project, but feel like I’m stuck, and I can’t find out why. The ‘help’ provided with the test suite doesn’t bring me any further.
Thanks for your input,
Bas
Hi there! Upon reading what tests your page failed, I noticed a few things:
You have a section AND the iframes both with the ID “video”., however ID’s are for a single element. You’ll want to change the <section id="video"> id to something else, like “in-action” or whatever you’d like.
The second test your page failed is that the navbar needs to be fixed to the top… meaning when you scroll down, it should scroll with you while staying at the top of the window. You can do this by adding position: fixed to the navbar.
Your soundcloud element isn’t centered… might want to fix that.
Other than that it looks good to me, though like @pjonp said you might want to do something a bit more unique, to maybe learn a bit more rather than mostly copying from the example.
I changed the id=video of the iframe, and changed nav bar position into ‘fixed’…but still have the same problem. I copied working code and created a mess, which I don’t understand!
First I want it working, then I’ll focus on the design.
Try setting your header to position:fixed instead, that way your image will scroll with the page as well. When I changed it to that you passed all the tests.
To fix your pricing/product boxes, you need to add display: flex to your “buy” ID, and set it to flex-flow: column in the mobile media query. (650px i assume you have it set as?)
And adjust the width of your header element to 100%… That should get your code working, more or less.
Moving forward, I suggest you practice on keeping your code a bit more organized. that way, it will be easier to figure out what you need to adjust, fix, add, etc… without having to refer to where things are in the HTML all the time. Though I know you mentioned you copied from the example, it’s still a good thing to keep in mind.
And as for the design, it’s actually easier (and more educational) for the most part to design on even just paper first, before jumping into code… that way you can lay out the code/page in a more organized way. But I digress, it’s of course your page - code/design it however you like. ^^