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.