Menu icon Foundation
How to retain Foundation's column-sizing with 'position: fixed' (7 col wide fixed footer)

My goal is to build a media player that is fixed to the bottom of the viewport. It should exactly match the standard Foundation resizing that happens when contained in a div with the class 'medium-10 medium-centered large-uncentered large-7 columns'.

What I've built resizes fine until I set .media-player position: fixed & bottom: 0. Of course, if I don't set those properties as such, the player is not fixed to the bottom, which is my goal.

Take a look here on CodePen: http://codepen.io/fourhexagons/pen/GiKte?editors=110

What is going on here and what am I missing?

position: fixedfixed footer

My goal is to build a media player that is fixed to the bottom of the viewport. It should exactly match the standard Foundation resizing that happens when contained in a div with the class 'medium-10 medium-centered large-uncentered large-7 columns'.

What I've built resizes fine until I set .media-player position: fixed & bottom: 0. Of course, if I don't set those properties as such, the player is not fixed to the bottom, which is my goal.

Take a look here on CodePen: http://codepen.io/fourhexagons/pen/GiKte?editors=110

What is going on here and what am I missing?

This post has been closed. No new replies can be added.

fourhexagons about 5 years ago

Here is my solution:

http://codepen.io/fourhexagons/pen/GADCb?editors=110

The key to the solution was to mimic the column structure of the footer with the 7-column left div (containing the .media-player__device) and 5-column right div (empty). That is, I contained the row & column in a div called .media-player, which I set as position: fixed, bottom: 0, and width: 100%.