Okay
  Print

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.