Possible simple footer problem (And Codepen viewport issue)

Hi guys,

I’m really struggling with Codepen. My editing screen shows me something completely different to my responsive screen so it feels like I’m constantly going back and forth between the two. Even when everything looks good in codepen responsive mode, I’ll check it on my ipad/phone and it’s looks completely different.

For example, I have a footer issue, I want the footer to be in view at all times. Which it is, but as soon as I go responsive mode, select 100% and it’s out of view unless I scroll up and down.

With codepen I’m unsure what is the correct screen for my final output I’m also unsure if 100% zoom means the actual viewport size of the final product.

I’m working on a 15.4-inch (2880 × 1800) screen so obviously going to be a huge difference to noteboot. Would I be right to assume that I need to be using more relative measurements or @mediaqueries at more points?


From what I’m looking at, it is not. If you want the footer to be in view at all times then you’ll need to position it to be at the bottom of the view port with something like position: fixed and bottom: 0.

1 Like

Yes, definitely use em for both your media breakpoints and at least any heights you set on elements. Currently you have sub-container set to a height of 180px. I only have to increase the font size a little before the text starts breaking out of those boxes.

1 Like

You’re awesome! Will give this a try and since making this post, all my over pages have the same problem! I’ll definitely use the relative measurements from now on.

I never knew about position fixed with the footer, makes sense seeing as it’s the opposite of a fixed navbar. :smiley: