Mobile meta tag

[Mikeysax]

On mobile things don't look as good as they could be. One thing you could look into is to add the "mobile meta tag" to your app, so the responsive effect of Bootstrap actually shows up on Mobile. Let me know in the comments once you figured that step out :)

[haleymnatz]

Hey, I got the app to look better overall (as it should on a mobile device), and I fixed an issue that was happening with my links (they were squished right up against the logo). But my footer is slightly cut off, even though there is plenty of room for it. I found this link about the same issue in the comments section of the last Splurty lesson:

http://www.thefirehoseproject.com/comments/14464

Is that the best way to fix this? Also, is there a better way to test out my site on the mobile version other than pushing my code up to heroku every time I make a minor change? I can change the size of my window on my laptop to be smaller, but it's still not replicating all of the issues I have with the actual mobile viewport.

[Mikeysax]

For your footer I recommend adding some padding to the bottom of the #footer and #footer .container:

padding-bottom: 40px;

In terms of checking out Mobile, you could always use google dev tools and click the button in the top right of this photo. Use it on localhost, right click the page, select inspect:

[haleymnatz]

Adding padding to the bottom won't fix it for every mobile screen size, right? I'm wondering if there is anyway to make sure that it really is "sticky" at the bottom of the screen, regardless of the screen size.

[Mikeysax]

Hey Haley,

It fixes the "cutting off" at every resolution.

You will learn how to implement a sticky footer in Nomster (Track 3). You can also take a look at implementing a sticky footer with flexbox.

https://css-tricks.com/couple-takes-sticky-footer/#article-header-id-3