CODEWITHSUNDEEP
cssresponsive-designskeleton-css-boilerplate
Chris Farrugia
Chris Farrugia

Reputation: 1046

How can I add padding to the container in the Skeleton Framework?

I'm using the Skeleton Framework (http://getskeleton.com) and I want a page that has a background color and a white container page.

If I add .container {padding:0 10px;} the layout breaks when resizing the window for small devices. Hopefully I'm missing something very obvious here. How can I add padding to the container without breaking the responsive design?

Upvotes: 2

Views: 7201

Answers (5)

Phillip Chan
Phillip Chan

Reputation: 993

You can add padding if you use box-sizing to whatever DIV you want to add padding to. This will calculate the width of the div with the padding into consideration.

.someElementInSkeletonGrid {
    box-sizing: border-box;
}

I've been able to successfully add padding to Skeleton DIV's by using this. Browser support is pretty good too.

Read More: http://css-tricks.com/box-sizing/

Browser Support: http://caniuse.com/#feat=css3-boxsizing

Upvotes: 0

Smandoli
Smandoli

Reputation: 7019

My solution to this was found here, if I understand your post correctly.

Since this has a white background, I want some padding inside the box. Simple enough: I added a inside the parent one and styled it appropriately with padding: 10px and a white background.

CSS

div.inner {
    padding: 4px 4px 8px 12px;
    overflow:auto;
}

HTML

<div id="what_you_think" class="realm eight columns alpha"> 
    <div class="inner">
        <h3>You are <font style="color:black;">not</font>...</h3>

    </div>
</div>

Result

http://home.grandecom.net/~scottmorse/

Upvotes: 2

user2080270
user2080270

Reputation: 1

I could be misunderstanding your problem, but have you tried adding margins instead of padding eg.

      <div class="two-thirds column">
          <div class="content">
              Your text etc here
          </div>
      </div>

where the content class has margin-left:10px;

Upvotes: 0

colin
colin

Reputation: 53

You'll need to edit skeleton.css (or over-ride it with your own stylesheet) for the smaller media queries.

Comment out the rule that removes the padding and reduce the .container .one.column (and so-on) rule by 20px. This will leave you with the correct size and a nice 10px margin down both sides. :)

    /* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
    .container { width: 300px; }

    /* removed to maintain margins
    .container .columns,
    .container .column { margin: 0; } */

    .container .one.column,
    .container .one.columns,
    .container .two.columns,
    .container .three.columns,
    .container .four.columns,
    .container .five.columns,
    .container .six.columns,
    .container .seven.columns,
    .container .eight.columns,
    .container .nine.columns,
    .container .ten.columns,
    .container .eleven.columns,
    .container .twelve.columns,
    .container .thirteen.columns,
    .container .fourteen.columns,
    .container .fifteen.columns,
    .container .sixteen.columns,
    .container .one-third.column,
    .container .two-thirds.column  { width: 280px; } /* this was reduced by 20px */
}

As an aside, I need to write a solution for device width 601px for Nexus 7.

Upvotes: 0

mike
mike

Reputation: 1906

This is unfortunate with skeleton.

Note that your .container.column and .container.columns classes each have a 10px padding. By nesting your columns in containers correctly you get consistent padding.

One solution is to use the offset-by-one class, which gives you a 60px padding to the left.

Finally, you can hack the core classes in skeleton.css, adding the padding you need to each element and shrinking their widths.

Upvotes: 0

Related Questions