I really like the default template but wanted to reduce the left and right column widths.
** ALWAYS BACK UP FILES BEFORE YOU CHANGE ANYTING **
Open the main-responsive.css file located in /templates/default/css
Find this section.
@media (min-width: 995px) {
.content-wrapper > .row > #vp_leftsidebox > .col-md-3,
.content-wrapper > .row > #vp_rightsidebox > .col-md-3 {
width: 22%;
}
.content-wrapper > .row > #vp_leftsidebox > .col-md-pull-6 {
right: 56%;
}
.content-wrapper > .row > .col-md-push-3 {
left: 22%;
}
.content-wrapper > .row > .col-md-6 {
width: 56%;
}
}
The bits we want to change are in BOLD. If you look the two smaller numbers (22%) added together with the larger number make 100% and this is what needs to be retained.
Here''s a snapshot of the above settings.
http://screencast.com/t/lExNffYy
I''ve wanted to make the columns slightly smaller so we could get more in the middle.
@media (min-width: 995px) {
.content-wrapper > .row > #vp_leftsidebox > .col-md-3,
.content-wrapper > .row > #vp_rightsidebox > .col-md-3 {
width: 19%;
}
.content-wrapper > .row > #vp_leftsidebox > .col-md-pull-6 {
right: 62%;
}
.content-wrapper > .row > .col-md-push-3 {
left: 19%;
}
.content-wrapper > .row > .col-md-6 {
width: 62%;
}
}
And here''s the result.
http://screencast.com/t/yHDyOOIKEf
Regards,
Mark