Change CSS for the Site Width

VPCart by default is set to a fixed width display for desktop layout and as it is now 100% responsive it will automatically adjust to suit the screen size of the device it is being viewed on.

You can easily change the width for the desktop layout so it can be up to 100% of the screen by applying the following simple tweaks:

1.   Open the “basic-style.css file using Notepad. The file is located in the templates/default/css

 

2.   Please insert the new code below into the bottom of the file:

.container {

  width: 100%;

}

.page_wrapper, .container, .vp_topheader_upper {

    max-width: 100%;

}

@media (min-width: 955px){

 .content-wrapper > .row > #vp_leftsidebox > .col-md-pull-9 {

     width: 16%;

 }

 .content-wrapper > .row > #vp_leftsidebox > .col-md-3.col-md-pull-9 {

     right: 84%;

 }

 .content-wrapper > .row > .col-md-9.col-md-push-3 {

     left: 16%;

 }

 .col-md-9.col-sm-8.col-xs-12.mobile-wrapper {

     width: 84%;

 }

}

 

3.   Save the file and upload to the templates/default/css folder.