Landing page responsive design

So I’ve passed the tests a while ago but I’ve been trying to make the landing page a bit nicer, trying to fix the view on mobile devices and I’ve got an issue. My landing page looks all good on my laptop, but when I check dev tools in chrome iphone X, ipad and ipad pro are messed up - the content is being cut short at the bottom, footer is missing. I tried playing around with the height, set it to something silly like 5000px and of course the content came back, with a lot of white space on the other mobile device sizes though. I do realize that is not the right solution for my problem, it must be something quite simple but I’m sure it makes sense.

Here is my code on codepen.io:

https://codepen.io/DiteIkporo/pen/vYOmMdK

I’d appreciate any tips!

I’m using the dev tools on Firefox and testing to see if there are any issues but I don’t see any! Were you able to fix these issues? It looks wonderful to me.

It’s also important to know when coding with Codepen, it already generates the boilerplate code for you! Super awesome, yes. I know. This is how your code will look to Codepen.

<html>
  <head>
  </head>
  <body>
    <!-- This is where your code belongs -->
  </body>
</html>

Since it has already done that for you, you can remove some of the HTML that you have already provided. All in all I love the color of the text, I love the background images, and I love the overall feel of the website. I can confidently say this is a solid webpage to me.

Thank you for your reply. I downloaded firefox and you are right it is all fine! Then I went and checked it on my desktop in google chrome and everything is responsive there too! So the problem is the google chrome dev tools on my laptop which I now have to fix somehow… But the good news is the code is all fine! Thanks for all the nice words, I really appreciate it and thanks for the tip with codepen, I wasn’t writing the code in codepen, I only pasted the code from Visual studio code so I didn’t know codepen already has the boiler plate. :slight_smile:

1 Like

Hi @Dite, maybe revisit the tests. It’s only passing 12/16 now.

Hi Roma, It was passing 16/16 but I changed the html and css later so it’s not passing anymore, it was intentional.

For the sake of it, I changed the ids to match the requirements, so it is now passing 16/16 again, I just really don’t like the id nav-bar, I like to use navbar, that alone was 3 errors and then my iframe was missing the id video. :slight_smile: but thanks for eing thorough :slight_smile: