There is really no “one CSS rule” that you can enter that will proportionally shrink “everything” on the page at the same time. Instead, you’ll have to use a web debugging tool like Firebug or Chrome Developer Tools and see what CSS rules are in effect for the elements that you want to change.
As far as making the margins smaller, there are 8 different media queries in place for the wrap class that determine the margin sizes at different viewport widths. Here are the current values:
@media screen and (min-width: 312px) {
.wrap {
max-width: 264px;
}
}
@media screen and (min-width: 456px) {
.wrap {
max-width: 408px;
}
}
@media screen and (min-width: 600px) {
.wrap {
max-width: 552px;
}
}
@media screen and (min-width: 744px) {
.wrap {
max-width: 696px;
}
}
@media screen and (min-width: 888px) {
.wrap {
max-width: 840px;
}
}
@media screen and (min-width: 1032px) {
.wrap {
max-width: 984px;
}
}
@media screen and (min-width: 1176px) {
.wrap {
max-width: 1128px;
}
}
@media screen and (min-width: 1320px) {
.wrap {
max-width: 1272px;
}
}
So if you want to change the margin at a particular viewport size, just copy the corresponding media query & rule into a CSS plugin like Custom CSS Manager and adjust the value for max-width (make it bigger if you want a smaller margin on the sides).
