Foundation 5 Prefix Gap

[wolfgang1983]

I have a small issue with my login example on my top input on my form there is to much gap between the span and the input

I do not know why? How would I solve issue?

http://codepen.io/riwakawebsitedesigns/pen/doVgWL

[MattDiMu]

Looks like you’re using the foundation grid system. See the docs, to have it explained it detail (http://foundation.zurb.com/grid.html). The short version is, that your consists of rows and gutters/gaps between them (done with padding-left and padding-right on the elements). One solution would be to set this padding to 0, something like this:

http://codepen.io/MDMueller/pen/bdYaxP

I’m no foundation expert, however – so there might be a better way for it :)

[Steven]

Similarly, you could use row collapse instead of column no-padding-right. Like this:

<div class="row collapse">
  <div class="large-2 small-2 columns">
    <span class="prefix">http://</span>
  </div>
  <div class="large-10 small-10 columns">
    <input placeholder="Enter your URL..." type="text">
  </div>
</div>

[Author]

Posts