3

I want to place 12 cards (2 rows -> 6 cards in one row). My code needs to be responsive so I used width/height %. Problem is that there is a lot of whitespace/empty space and cards are tiny. Here is code that I used:

JSFIDDLE: http://jsfiddle.net/A2bU7/

CSS:

    #pagewrap
{
display:flex;
display: -webkit-flex;
display: -moz-flex;
width:100%;
}
#board{
//padding: 5px;
background-color:#cccccc;
width:100%;
   height:70%;
}
#board > div {
        background-color: grey;
        border:#000 1px solid;

        width:10%;
        height:20%;
        float:left;
        margin:15px;
        padding:15px;
        font-size:64px;
        cursor:pointer;
        box-shadow: 0px 5px 14px grey;
        border-radius: 5px;
        transition: 0.2s;

    }
#board > div:nth-child(6n+1) {
    clear: both;
}
#board > div:hover {
    box-shadow: 0px 0px 25px black;
    transition-timing-function: all ease-in-out;

}

HTML:

<html>
<div id="pagewrap">
<div id="board">
<div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
</div>
<div>
</html>
user2496520
  • 881
  • 4
  • 13
  • 36
  • You shouldn't have multiple `id`s of the same name. Use a `class` if you need to name things the same... – Dryden Long May 27 '14 at 22:15
  • I will change ids to classes ASAP @DrydenLong. – user2496520 May 27 '14 at 22:22
  • do you want bigger cards or just spaced evenly across or both? to make the cards bigger just increase the padding – MilkyTech May 27 '14 at 22:23
  • @ChrisM If I increase padding, I won't be able to place 6 cards in each row. – user2496520 May 27 '14 at 22:27
  • so it needs to always be 6 cards, 2 rows no matter the window width and you want the size of the cards to be responsive as well? – MilkyTech May 27 '14 at 22:35
  • @ChrisM yes, size of cards must be calculated of div width. So width of card must be 10% of total div width.... – user2496520 May 27 '14 at 22:43
  • [The Answer here](http://stackoverflow.com/questions/5657964/css-why-doesnt-percentage-height-work) may help explain why the cards would need to be an image rather than background color to scale both width and height – MilkyTech May 27 '14 at 23:26
  • you can see [in this fiddle](http://jsfiddle.net/MilkyTech/A2bU7/6/) that something along the way needs to have a fixed height. – MilkyTech May 27 '14 at 23:32

2 Answers2

1

Margin stretches the outside of your div that's why you getting whitespace/empty space and padding stretches on the inside. So you should tune in/out your margin/padding of your card and choose what you like.

#board > div {
  margin: 5px;
  padding: 25px 20px;
}

fiddle with margin/padding change. fiddle with percentile width/height.

Md Nazmoon Noor
  • 3,187
  • 1
  • 24
  • 30
  • you code is working but card width and height is small. It does not fill whole div. I modified your code and width is covered but height remains still same (smaller) – user2496520 May 27 '14 at 22:47
  • your cards don't have `width/height`. You're maintaining `margin/padding` to give them a shape. Read http://www.w3schools.com/css/css_padding.asp . Changing `top-right-bottom-left` properties of card's `padding` will provide your desired shape I think. – Md Nazmoon Noor May 27 '14 at 23:00
  • can I use inside card divs height/width fixed value in percent in order to get shape? – user2496520 May 27 '14 at 23:11
  • sure you can. But then you'd have to make some adjustment like give the parent `#board` a fixed height. http://jsfiddle.net/nazmoonnoor/A2bU7/7/ – Md Nazmoon Noor May 27 '14 at 23:22
0

Reduce your margin and maybe increase your padding.

S. Ahn
  • 633
  • 5
  • 8