How do I change the width of the theme?
Go to Theme Options -> Styling and in the CSS Code box add:
@media only screen and (min-width: 1461px) {
.gp-boxed-layout #gp-page-wrapper,
.gp-container {
width: 1460px;
}
#gp-content {
width: 1100px;
}
.gp-nav .menu li.gp-megamenu > .sub-menu,
.gp-nav .menu li.gp-tab-content-menu .sub-menu,
.gp-nav .menu li.gp-content-menu .sub-menu,
.gp-nav .menu li.gp-content-menu .gp-inner-loop {
width: 1430px;
}
.gp-nav .menu li.gp-tab-content-menu .gp-inner-loop {
width: 1200px;
}
.gp-both-sidebars #gp-content {
width: 780px;
}
.gp-sidebar {
width: 300px;
}
}
@media only screen and (min-width: 1321px) {
.gp-responsive.gp-boxed-layout #gp-page-wrapper,
.gp-responsive .gp-container {
width: 1320px;
}
.gp-responsive #gp-content {
width: 960px;
}
.gp-responsive .gp-nav .menu li.gp-megamenu > .sub-menu,
.gp-responsive .gp-nav .menu li.gp-tab-content-menu .sub-menu,
.gp-responsive .gp-nav .menu li.gp-content-menu .sub-menu,
.gp-responsive .gp-nav .menu li.gp-content-menu .gp-inner-loop {
width: 1290px;
}
.gp-responsive .gp-nav .menu li.gp-tab-content-menu .gp-inner-loop {
width: 1060px;
}
.gp-responsive.gp-both-sidebars #gp-content {
width: 640px;
}
}
@media only screen and (min-width: 1261px) {
.gp-responsive.gp-boxed-layout #gp-page-wrapper,
.gp-responsive .gp-container {
width: 1260px;
}
.gp-responsive #gp-content {
width: 900px;
}
.gp-responsive .gp-nav .menu li.gp-megamenu > .sub-menu,
.gp-responsive .gp-nav .menu li.gp-tab-content-menu .sub-menu,
.gp-responsive .gp-nav .menu li.gp-content-menu .sub-menu,
.gp-responsive .gp-nav .menu li.gp-content-menu .gp-inner-loop {
width: 1230px;
}
.gp-responsive .gp-nav .menu li.gp-tab-content-menu .gp-inner-loop {
width: 1000px;
}
.gp-responsive.gp-both-sidebars #gp-content {
width: 580px;
}
}
@media only screen and (min-width: 1121px) {
.gp-responsive.gp-boxed-layout #gp-page-wrapper,
.gp-responsive .gp-container {
width: 1120px;
}
.gp-responsive #gp-content {
width: 760px;
}
.gp-responsive .gp-nav .menu li.gp-megamenu > .sub-menu,
.gp-responsive .gp-nav .menu li.gp-tab-content-menu .sub-menu,
.gp-responsive .gp-nav .menu li.gp-content-menu .sub-menu,
.gp-responsive .gp-nav .menu li.gp-content-menu .gp-inner-loop {
width: 1090px;
}
.gp-responsive .gp-nav .menu li.gp-tab-content-menu .gp-inner-loop {
width: 860px;
}
.gp-responsive.gp-both-sidebars #gp-content {
width: 480px;
}
.gp-responsive.gp-both-sidebars .gp-sidebar {
width: 280px;
}
}
@media only screen and (min-width: 1083px) {
.gp-responsive.gp-boxed-layout #gp-page-wrapper,
.gp-responsive .gp-container {
width: 1082px;
}
.gp-responsive #gp-content {
width: 722px;
}
.gp-responsive .gp-nav .menu li.gp-megamenu > .sub-menu,
.gp-responsive .gp-nav .menu li.gp-tab-content-menu .sub-menu,
.gp-responsive .gp-nav .menu li.gp-content-menu .sub-menu,
.gp-responsive .gp-nav .menu li.gp-content-menu .gp-inner-loop {
width: 1052px;
}
.gp-responsive .gp-nav .menu li.gp-tab-content-menu .gp-inner-loop {
width: 822px;
}
.gp-responsive.gp-both-sidebars #gp-content {
width: 722px;
}
.gp-responsive.gp-both-sidebars #gp-sidebar-right {
width: 300px;
}
}
@media only screen and (min-width: 1024px) {
.gp-responsive.gp-boxed-layout #gp-page-wrapper,
.gp-responsive .gp-container {
width: 1024px;
}
.gp-responsive #gp-content,
.gp-responsive.gp-both-sidebars #gp-content {
width: 664px;
}
.gp-responsive .gp-nav .menu li.gp-megamenu > .sub-menu,
.gp-responsive .gp-nav .menu li.gp-tab-content-menu .sub-menu,
.gp-responsive .gp-nav .menu li.gp-content-menu .sub-menu,
.gp-responsive .gp-nav .menu li.gp-content-menu .gp-inner-loop {
width: 994px;
}
.gp-responsive .gp-nav .menu li.gp-tab-content-menu .gp-inner-loop {
width: 764px;
}
}
Change the widths for each media query to the desired values.

