Width of the theme

Almost done… but still there is a problem.

See here: http://cracowguides.com

Some time ago I was answered by the fruitful team on this topic, can you use it?:

The theme is based on a 940px wide 16 column system. You would need to convert the base grid css elements to a percentage based system most likely. Also the offset grids as-well.

style.css from line 71

/* Base Grid */
.container .one.column,.container .one.columns {
    width:40px;
}
.container .two.columns {
    width:100px;
}
.container .three.columns {
    width:160px;
}
.container .four.columns {
    width:220px;
}
.container .five.columns {
    width:280px;
}
.container .six.columns {
    width:340px;
}
.container .seven.columns {
    width:400px;
}
.container .eight.columns {
    width:460px;
}
.container .nine.columns {
    width:520px;
}
.container .ten.columns {
    width:580px;
}
.container .eleven.columns {
    width:640px;
}
.container .twelve.columns {
    width:700px;
}
.container .thirteen.columns {
    width:760px;
}
.container .fourteen.columns {
    width:820px;
}
.container .fifteen.columns {
    width:880px;
}
.container .sixteen.columns {
    width:940px;
}
.container .one-third.column {
    width:300px;
}
.container .two-thirds.column {
    width:620px;
}
/* Offsets */
.container .offset-by-one {
    padding-left:60px;
}
.container .offset-by-two {
    padding-left:120px;
}
.container .offset-by-three {
    padding-left:180px;
}
.container .offset-by-four {
    padding-left:240px;
}
.container .offset-by-five {
    padding-left:300px;
}
.container .offset-by-six {
    padding-left:360px;
}
.container .offset-by-seven {
    padding-left:420px;
}
.container .offset-by-eight {
    padding-left:480px;
}
.container .offset-by-nine {
    padding-left:540px;
}
.container .offset-by-ten {
    padding-left:600px;
}
.container .offset-by-eleven {
    padding-left:660px;
}
.container .offset-by-twelve {
    padding-left:720px;
}
.container .offset-by-thirteen {
    padding-left:780px;
}
.container .offset-by-fourteen {
    padding-left:840px;
}
.container .offset-by-fifteen {
    padding-left:900px;
}
/* #Tablet (Portrait)================================================== */
/* Note:Design for a width of 768px */
@media only screen and (min-width:768px) and (max-width:959px) {
    .container {
    width:768px;
}
.container .column,.container .columns {
    margin-left:10px;
    margin-right:10px;
}
.column.alpha,.columns.alpha {
    margin-left:0;
    margin-right:10px;
}
.column.omega,.columns.omega {
    margin-right:0;
    margin-left:10px;
}
.alpha.omega {
    margin-left:0;
    margin-right:0;
}
.container .one.column,.container .one.columns {
    width:28px;
}
.container .two.columns {
    width:76px;
}
.container .three.columns {
    width:124px;
}
.container .four.columns {
    width:172px;
}
.container .five.columns {
    width:220px;
}
.container .six.columns {
    width:268px;
}
.container .seven.columns {
    width:316px;
}
.container .eight.columns {
    width:364px;
}
.container .nine.columns {
    width:412px;
}
.container .ten.columns {
    width:460px;
}
.container .eleven.columns {
    width:508px;
}
.container .twelve.columns {
    width:556px;
}
.container .thirteen.columns {
    width:604px;
}
.container .fourteen.columns {
    width:652px;
}
.container .fifteen.columns {
    width:700px;
}
.container .sixteen.columns {
    width:748px;
}
.container .one-third.column {
    width:236px;
}
.container .two-thirds.column {
    width:492px;
}
/* Offsets */
.container .offset-by-one {
    padding-left:48px;
}
.container .offset-by-two {
    padding-left:96px;
}
.container .offset-by-three {
    padding-left:144px;
}
.container .offset-by-four {
    padding-left:192px;
}
.container .offset-by-five {
    padding-left:240px;
}
.container .offset-by-six {
    padding-left:288px;
}
.container .offset-by-seven {
    padding-left:336px;
}
.container .offset-by-eight {
    padding-left:384px;
}
.container .offset-by-nine {
    padding-left:432px;
}
.container .offset-by-ten {
    padding-left:480px;
}
.container .offset-by-eleven {
    padding-left:528px;
}
.container .offset-by-twelve {
    padding-left:576px;
}
.container .offset-by-thirteen {
    padding-left:624px;
}
.container .offset-by-fourteen {
    padding-left:672px;
}
.container .offset-by-fifteen {
    padding-left:720px;
}

It’s ok.

Coming back to this code:

.container .sixteen.columns {
    width: 1160px;
}
.container {
    width: 1160px;
}
.container .eleven.columns {
    width: 840px;
}
.blog_post .post-content {
    width: 770px;
}

It doesn’t work responsively. What else do i have to add (from your style.css) to my child-theme to make everything responsive (especially slider). I wanna keep header, footer and social widget as default.

I’ve just turned on customization back. You can have a look. If I copy all your style.css code, the wide slider stays responsive, so somehow you you have done it before. It’s all about removing the code that affects header footer and the social widget.I wanna keep it default. Thanks for all help 🙂

No, I decided to stick to 1160px. Using your code from style.css I I get what I need, but there is some customization of the footer and social widget which don’t want.

My question is how to stay with 1160px wide theme which is responsive and does not have mention customization.

I just wanna keep everything in 1160px, and have it responsive.