1 and 3-column layout issue when resizing - CSS-Tricks

This topic is empty.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
March 13, 2014 at 12:53 pm #165694

GroovyMotion
Participant

In my main content area I have 3 columns (33.333%) that becomes 1 column (100%) when resized. I reuse the same column layout for other pages where there is only 1 column (100%). My issue is the padding, I can’t specify which column has x padding.

I know my layout is funky but so far it’s the best I could think of, aside of going all grids since I want my portfolio site uploaded asap!

I have commented the css where I tried to resize the padding for columns

Here is my pen: http://codepen.io/GroovyMotion/pen/sKtFE

Thanks in advance!

March 13, 2014 at 1:19 pm #165699

dsarchy
Participant

If you don’t mind the additional mark up you could just add a padded div with display:block inside your column

March 13, 2014 at 1:34 pm #165702

GroovyMotion
Participant

Hmmm…this didn’t seem to do nothing! :(

March 13, 2014 at 2:24 pm #165709
Atelierbram
Participant
Alternatively, if you went with multiple classes on the ‘content’ div:
```
<div class="column column-3">
            <div class="content pad pad-medium"
```
and in the CSS:
```
 .content { 
   /* padding: 0.6em; */
   min-height: 170px;
    border: 1px solid #000;
    /* overflow: auto; */
    /* background-color: rgba(0,255,255,.5); */
 }
.pad-small { 
  padding: .5em;
}
.pad-medium { 
  padding: 1em;
}
.pad-large { 
  padding: 1.25em;
}
```
March 13, 2014 at 2:33 pm #165711

GroovyMotion
Participant

I’ll try it out but so far I sort of did a similar thing by specifying 3 classes to the column and when they are @33.333% they have a specific padding and used first-of and last-of to center them.

When they switch to 100% it does seem to work but I will have to try it out with my other pages which uses column-1.

Here is my update: http://codepen.io/GroovyMotion/pen/sKtFE

March 13, 2014 at 2:54 pm #165713

Atelierbram
Participant

This is what I’m seeing when giving background/outline colors : congratulations, seems to work …

March 13, 2014 at 3:01 pm #165715

GroovyMotion
Participant

It works in the pen but on my live site I still see too much padding between the columns! I have to see what’s the issue!

Have a look here: http://groovymotion.com/index12.html
the inner padding is almost double than what’s in the pen!

edit disregard, I was using the old css file! :)
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The forum ‘CSS’ is closed to new topics and replies.