Menu icon Foundation
What is the proper way to add a blank or spacer column?

Is just adding   to a spacer column the proper way to do it? I've seen you can set an offset but that only bumps the columns to the right correct? What I've done works, I'm just not sure if it's the most elegant or proper way to do it. See image & code.

Spacer

        <div class="large-2 columns">&nbsp;</div>
        <div class="large-4 columns">CONTENT</div>
        <div class="large-4 columns">CONTENT</div>
        <div class="large-2 columns">&nbsp;</div>
            

         

gridspaceroffset

Is just adding   to a spacer column the proper way to do it? I've seen you can set an offset but that only bumps the columns to the right correct? What I've done works, I'm just not sure if it's the most elegant or proper way to do it. See image & code.

Spacer

        <div class="large-2 columns">&nbsp;</div>
        <div class="large-4 columns">CONTENT</div>
        <div class="large-4 columns">CONTENT</div>
        <div class="large-2 columns">&nbsp;</div>
            

         
Rafi Benkual almost 4 years ago

Couple ways to do this:

  1. wrap the columns in row that has centered columns like a "large-9 large-centered"
  2. Use offsets "large-offset-1"

Jon Friedrich almost 4 years ago

Hmm Interesting, with that method, would the top row of 3 items maintain the exast same width rows as the bottom 4? (see image above)

Rafi Benkual almost 4 years ago

Yes, it will move the content to the middle. Here is an example taken from http://foundation.zurb.com/business/services.html which we made recently.

<div class="row">
  <div class="medium-8 medium-centered columns">
  <div class="row">
    <div class="medium-6 columns">
      <h3>Header</h3>
      <p>Some test</p>
    </div>

    <div class="medium-6 columns">
       <h3>Header</h3>
       <p>Some text</p>
    </div>
  </div>
</div>
</div>

Jon Friedrich almost 4 years ago

I've implemented the above code but the column widths aren't equal. See page here
http://www.s278616331.onlinehome.us/other%20sites/RD/web-design.html The size difference becomes very noticible when in mobile view and looking at the bottom two images compared to the above ones. Any idea why this is?

Rafi Benkual almost 4 years ago

I guess I'm not seeing it or you fixed it. Looks aligned to me.

Jon Friedrich almost 4 years ago

Unfortunately it still isn't fixed. They are aligned as far as centering goes but they are not the same size.

See here http://imgur.com/akD4P0v

Ana Jones 12 months ago

That problem now is fixed buyinstfollowers and evrything is ok. So is so easier for working.

Rameez Ramzan 12 months ago

Hi,

Please review this and let me know

<table>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td class="spaced">Three</td>
    </tr>
</table>

td {
    padding: 8px;
    background-color: #eee;
    display: inline-block;
    margin: 0;
    border: 0;
}
td.spaced {margin-left: 20px;}

Taylor Shaw 6 months ago

I am new to the whole thing but I am pretty sure that the platform is quite resourceful in running a large number of programs and services. I am pretty sure that the platform will be able to do the same with some minor additions to the code. background removal service

ritariya 2 months ago

I have seen that you can set offset but it only bumps the column to the right corner. I have been searching for the thing that how we can add spacer column. From the post I could get more information regarding it. I could understand its division parts. die cast light fixtures