Edit November 2015: In Foundation 6 check out Typography Helpers Edit April 2014: In Foundation 5 check out Utility classes. Original answer: Use the text-center class. <div class=”row”> <div class=”twelve columns text-center”><br /> <img src=”https://stackoverflow.com/questions/12079049/img_06.jpeg” alt=”slide image”> </div> </div> Source: https://github.com/zurb/foundation/pull/224
I ran into the same problem yesterday. The trick is, for full width spanning blocks, you just keep them out of the row/column structure, since row/column will always apply the default padding. Keep your footers and headers on their own, and use row/column inside them. <header> This will span the full width of the page … Read more
The above answer did not work for me. Here’s what worked (Foundation 4 and jQuery): $(‘#myModal’).bind(‘opened’, function() { console.log(“myModal opened”); });
I got this from another answer, so give thegreyspot some credit in this question. solution: call $(window).resize(); after the graph is loaded (or when you fill it with data)
You can listen for the click event and call preventDefault to stop the browser from setting the hash. Example with jQuery: $(‘.mylink’).click(function(event){ event.preventDefault(); });
border: 0 should be enough, but if it isn’t, perhaps the button’s browser-default styling in interfering. Have you tried setting appearance to none (e.g. -webkit-appearance: none)
Perfect Full Page Background Image //HTML <img src=”https://stackoverflow.com/questions/16548338/images/bg.jpg” id=”bg” alt=””> //CSS #bg { position: fixed; top: 0; left: 0; /* Preserve aspet ratio */ min-width: 100%; min-height: 100%; } OR img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up … Read more
2 Part Answer Part 1: To answer “why people are using min-width over max-width?”: It has to do with design flow. Typically, with min-width patterns, you’re designing mobile-first. With max-width patterns, you’re design desktop-first. Going mobile-first with min-width, the default style is the mobile style. Queries after that then target progressively larger screens. body { … Read more
You can just use the sticky css attribute in your scss. In html or php add class to your component: <div data-sticky-container class=”sticky-container”> and in scss or css: .sticky-container { position: sticky; top: 0; z-index: 10; } Now just put the distance from top you need!
I bumped into this problem after npm install -g bower too. I solved the problem by adding npm’s binary folder to my path. Here are some helpful hints for doing that: Find the location of your npm global binaries: npm config get prefix. This path may look something like C:\Users\username\AppData\Roaming\npm (or C:\ProgramData\chocolatey\lib\nodejs.commandline.X.XX.XX\tools if you use … Read more