Introduction
In the transition to version 1.6, the basic theme of prestashop to integrate Twitter Bootstrap . It is therefore responsive or adaptive by default. This means that the display adapts automatically to all types of terminals (desktop, smartphone / mobile, tablet …). While being able to rightly be considered as an advantage we have had in Novazen, customers who want an e-commerce site on version 1.6 of Prestashop do not want a responsive theme. In this little tutorial, we will introduce the method we use to disable responsive on a Prestashop 1.6 theme
Steps to disable responsive on Twitter Boostrap
Step 1: Remove the “viewport” in the “header”
This step is the simplest, just remove the metas “viewport” in the header of our theme.
Step 2: Set the width of the main container
Add the class below to a css file that will be loaded after the one from Twitter Bootsrap. Its role is to override the max-width of the .container class
.container{
max-width: none!important;
width:970px; // 970px corresponding to the useful width of your website
}
Step 3: Set the width of the side columns still called “navbars”
Open the variables.less file and set the following variables to 0
- @ grid-float-breakpoint
- @ screen-xs-max
Step 4: Use grids
To manage the grids, use the .col-xs- * classes instead of the medium and large grids
Step 5: Optional
Use the file “ Respond.js ” for IE 8. media queries still being present this file will disable the mobile view on IE8
Conclusion
Although Twitter Bootstrap is primarily mobile oriented, it is possible to disable its relative operation when needed. We come above to present the steps to get there. In case of question or need for the creation of a theme or Prestashop offshore development, do not hesitate to contact us contact .