I made a rails app mobile responsive recently. ####Testing Using Localhost on Mobile You can run localhost on your mobile phone. 1. Go to network on your mac 2. Jot down the ip address of the wifi that you are currently on 3. Then head to ipaddress:3000 **If you have a rails 4+ app, you need to do rails server -b 0.0.0.0 to allow other machines to access your localhost.** ####Utilizing Foundation Visibilty Class You can hide/show elements for devices with the visibility class given to you by foundation. class="show-for-small-only" class="hide-for-small-only" ####Off Canvas Mobile Navigation Bar Notice the section-class within the off-canvas-wrap class. #modified, don't want to bore you <div class="off-canvas-wrap" data-offcanvas> <!--other code--> <section class="main-section"> <%= yield %> </section> <!-- close the off-canvas menu --> <a class="exit-off-canvas"></a> </div> </div> I really hate how I have to pass <%= yield %> into the main-section class. The main-section class actually dictates the height of the left off canvas menu. I ended up doing this in application.html.erb <div id="container"> <% if is_mobile_device? %> <%= render 'shared/mobile_main_nav' %> <% else %> <%= render 'shared/main_nav' %> <%= yield %> <% end %> </div> I ended up having two <%= yield %>, either this one from main navigation or this one in mobile navigation which depends on which device gets detected. Forced me to make a mobile device detection method using user agents. private def is_mobile_device? request.user_agent =~ /Mobile|iPad|silk|palm|Apple-iPad|blackberry|nokia|phone|midp|mobi|symbian|chtml|ericsson|minimo|audiovox|motorola|samsung|telit|upg1|windows ce|ucweb|astel|plucker|x320|x240|j2me|sgh|portable|sprint|docomo|kddi|softbank|android|mmp|pdxgw|netfront|xiino|vodafone|portalmmm|sagem|mot-|sie-|ipod|up\\.b|webos|amoi|novarra|cdm|alcatel|pocket|ipad|iphone|mobileexplorer|mobile|Apple-iPad3C1|Apple-iPad2C4/ end helper_method :is_mobile_device?