How to turn off Responsive Themes

The responsive themes are designed to modify to fit different mobile devices. You can turn off the responsive settings if you want to theme to display the SAME not matter what device you use. Please note when the responsive features are turned off, the theme no longer have the ability to modify itself to different devices and some part of your content may get cut off in certain situation.


1) First log into your Weebly and access the code editor by clicking on “Design” tab and click on “edit html/css”

2) Each theme have a specific number of page layouts. You will be able to find all the page layouts listed under “Page Layouts”. To turn off the responsive feature, you will need to delete a couple line of codes in every page layouts

3) Click on the first page layout which is index.html. Here near the top of the page locate and delete these codes:

<meta name=”viewport” content=”initial-scale=1″>
<link rel=”stylesheet” href=”/files/theme/responsive.css”>

<link rel=”stylesheet” rel=’stylesheet’ media=’all and (min-width: 200px) and (max-width: 1024px)’ href=”/files/theme/mobile.css”>
<script src=””></script>
<script src=”/files/theme/mobilenav.js”></script>

4) Repeat step 3 on all of your page layouts

5) Check #wrapper code

Once you have completed the html side, you want to check the css to ensure there is a min-width setting. Some theme may have this already, while other may not. So it is important to check in your theme.

    • Click into “main_style.css” to open the css editing page
    • Here locate the #wrapper code
      Each theme’s wrapper code can look different, the important thing here is to look for a code that start with #wrapper like this:
      #wrapper {
      height: 100%;
      width: 100%;
      opacity: 0;
      filter: alpha(opacity=00);
      -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=00)”;
      -webkit-transition: opacity .5s ease-out;
      -moz-transition: opacity .5s ease-out;
      -o-transition: opacity .5s ease-out;
      -ms-transition: opacity .5s ease-out;
      transition: opacity .5s ease-out;
      min-width: 1024px;
    • Here check to see if there is min-width: 1024px;. If you see it, you are finish and just save your changes. If you DON’T see min-width: 1024px;, then add it in at the bottom of the code like shown above

5) Save your change and re-publish your website for the change to take effects

Tags: ,