Ask a quote

Prestashop 1.6 and Twitter Bootsrap: Disabling responsive

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 […]
NOVAZEN > Blog > Prestashop 1.6 and Twitter Bootsrap: Disabling responsive

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

     
  1. @ grid-float-breakpoint
     
  2. @ 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 .

Leave a Reply