Footer Smaller on Different Mobile Page - html

Question

I have a website that I am making for a friend, and on the mobile homepage, the footer is perfectly aligned. However, when you go over to either the pics or vids page, the footer is moved over to the left side. The css file can be found here. I have no idea why this is happening, and any help to understand why this is happening, and how to fix it would be great.
Just a quick note, to access the mobile version on desktop, use chrome, open up dev tools, and click on the phone icon in the top left of the dev tools pane. Set the width to 617, and the height to 1002.
Thanks!

Answer 1

Your content is overflowing from the pf-content class, making the page larger than 100% width that the footer is filling.
There are a range of ways to solve this:
Add overflow hidden to pf-content (Will look nasty on small screens)
Set a min width on the whole page body{ min-width: 1200px; }
Make the videos reactive, e.g. display inline blocks which will then wrap to a new line if the page is to small. (Could also be done with media queries used to scale the videos)
I would suggest making the page more responsive, and getting the videos to flow onto new lines if the page is too small to contain multiple. As a general rule tables aren't a great way to structure anything (other than an actual data table) you'd be much better off with a more flexible element. Though this will be more work on your part.

Answer 2

The width of the two iframes for video are set to 520px each which exceed the resolution you were testing on.
The iframes were placed in a table, with a fixed number of columns, causing an issue of overflow.
You can place the iframes in div instead, then change the way they are displayed in css. i.e. you can do a 2 column-like structure in the desktop.css if preferred and a responsive one in the mobile.css
<div class="video-container">
<iframe src="https://player.vimeo.com/video/146191500?title=0&portrait=0" width="520" height="293" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
<div class="video-container">
<iframe src="https://player.vimeo.com/video/141281580?title=0&portrait=0" width="520" height="293" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
<style>
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>