Menu icon Foundation
Can Someone Help Me Understand the Column Padding

Up until now, I've gotten away with not worrying about the left and right margin on columns with foundation sites. Now that I have more clearly defined content regions, the closeness of text to the left or right edge is very awkwardly apparent.

I see the rule that is driving this, but would like to better understand how and why it's working. Would someone be willing to explain what's occurring here?

I modified the padding from 0.9375em to 3em in one instance, and there was no affect. Further down in the CSS, I tried the change and it worked perfect by adding the extra padding to make the page layout more visually pleasing, and then removed is when the browser window width was reduced.

My current layout has a large-9, large-3 structure. Perhaps by editing the rule that is directly following all of the large column rules, it made the change, but only when the large classes are used.

        .column,
  .columns {
    position: relative;
    padding-left: 0.9375em;
    padding-right: 0.9375em;
    float: left; }      

         

Foundation 5columnpadding

Up until now, I've gotten away with not worrying about the left and right margin on columns with foundation sites. Now that I have more clearly defined content regions, the closeness of text to the left or right edge is very awkwardly apparent.

I see the rule that is driving this, but would like to better understand how and why it's working. Would someone be willing to explain what's occurring here?

I modified the padding from 0.9375em to 3em in one instance, and there was no affect. Further down in the CSS, I tried the change and it worked perfect by adding the extra padding to make the page layout more visually pleasing, and then removed is when the browser window width was reduced.

My current layout has a large-9, large-3 structure. Perhaps by editing the rule that is directly following all of the large column rules, it made the change, but only when the large classes are used.

        .column,
  .columns {
    position: relative;
    padding-left: 0.9375em;
    padding-right: 0.9375em;
    float: left; }      

         
Jacob Brooks almost 5 years ago

Hey Marc!

There are a few things that come to mind here.

What exactly are you wanting to know about the padding? It seems like you know what the 0.9375em left and right padding is doing so what is your question? Are you asking why when you change it in one place and nothing happens and other times it does what you expected?

If so, I would need to see some code to really be able to help. My first thought is that maybe with other custom code, your "EMs" are getting offset in places. I am not trying to insult you so dont take it that way but "EMs" are tricky. There are lots of resources to explain, and this is not and end all be all resource, but check out: http://css-tricks.com/why-ems/

In a nutshell, "EMs" are based on the parent so if there is a font-size or "EM" setting around another "EM" then they react differently. A short example would be (please excuse the inline-css its just easier to show this way):

<div class="outer-div" style ="font-size: 2em;">
     <div class="inner-div" style="font-size:2em;">
        TYPE HERE
     </div>
</div>

The Inner DIV font-size would be twice as big as the outer DIV. I used font-size because it is easier to see what is happening but the same thing applies to using "EMs" with padding.

Also, depending on where you are adding the extra padding, that could dictate if that works or not.

Let me know if that helped at all. If not, try to give a simple code example of what is happening with pictures and maybe I can help further.

Good Luck.

Jacob

Marc McGee almost 5 years ago

Hi Jacob:
Not insulted at all. Just a bit confused and know enough to be dangerous:) Thank for jumping in to assist.

Look at the posts in this forum and how close the text is to the left edge of the box. What if I wanted my text in my content region to inset a bit more?

Adjusting the padding in the last "foundation column" rule seemed to give me the result I wanted, but I am now thinking maybe not so much. With the padding changed from 0.9375em to 3 em, it does give me the added visually pleasing buffer between the text and the left and right edge. However, it has occurred to me that ALL instances of columns will now get that rule. That might not be good if I were trying to insert 5 or 6 small columns with little blurbs for something.

Maybe I have to write a custom rule that changes the padding on the column, but use it only on the sections where I want it to apply.

Marc McGee almost 5 years ago

I did a bit more research and found a site (http://ocdesk.com/products/exotic-rosewood-iphone-back-cover) that handles the padding by placing a custom outer wrap around the columns.

This might be a good way for me to handle the desired extra left and right padding in my situation.

Jacob Brooks almost 5 years ago

You are correct. If you alter the .column padding to be 3em; then that will change every instance of the columns which you probably dont want. Looks like you found the answer yourself, but yeah, I would create a custom class for the padding that you want, then apply that to which ever DIVs you want to have the added padding.

Glad you found a solution and I hope I helped a little! Good Luck!

Marc McGee almost 5 years ago

Thanks for the feedback Jacob.

Rafi Benkual almost 5 years ago

Yes, do something like

<div class="small-6 spacer columns">

then
CSS
.spacer.columns {
padding: 3rem;
}

Marc McGee almost 5 years ago

Hey Rafi:

Just responded to your response to my other post regarding the same question. Oops! I started the other post, then thought I had deleted it. Apologies for doubling up and any confusion caused.