Streaming live at 10am (PST)

How to make a Webflow site non-responsive


#1

One of the strengths of Webflow is that it makes it easier to work with multi-device layouts. However, sometimes, you may not want that, so here's a way that you can disable some of the default responsive behavior in our grid system.

First, add the following code to the <head> Custom Code section of your site's settings:

<style>
  @media screen and (max-width: 991px) {
    .w-container { 
      max-width: none !important;
      width: 940px !important;
    }
  }
  
  @media screen and (max-width: 767px) {
    .w-col    { float: left; }
    .w-col-1  { width:8.333333333333332%  }
    .w-col-2  { width:16.666666666666664% }
    .w-col-3  { width:25%                 }
    .w-col-4  { width:33.33333333333333%  }
    .w-col-5  { width:41.66666666666667%  }
    .w-col-6  { width:50%                 }
    .w-col-7  { width:58.333333333333336% }
    .w-col-8  { width:66.66666666666666%  }
    .w-col-9  { width:75%                 }
    .w-col-10 { width:83.33333333333334%  }
    .w-col-11 { width:91.66666666666666%  }
    .w-col-12 { width:100%                }
  }
</style>

<meta name="viewport" content="initial-scale=1">

Then simply publish your site (you may have to unpublish and republish it). It should now appear on your iPad/iPhone just like the desktop version.

Important: Design only in the desktop (default) breakpoint inside Webflow. If you switch to other devices and add additional styles, they will carry over to the published site. In other words, this code will not completely "unresponsivize" an already responsive site.


Can you use Webflow for non-responsive Website?
Webflow's viewport setting works incorrectly if the web window is not full-device-width
#2

Hi! Tnx for the code. But, i have some issues after using it. https://yadi.sk/i/sJTvaJBfcCVgB . Here is site link http://bicolor.webflow.com/ . Problem happens on tablets and phones.


#3