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.