The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS 1 and 3-column layout issue when resizing

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #165694

    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:

    Thanks in advance!


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


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


    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;

    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:


    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:
    the inner padding is almost double than what’s in the pen!

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.