How to make a site that fits between 970px and 1300px

Basically adding min-width.

.container-fluid {
    margin-left: auto;
    margin-right: auto;
    max-width: 1300px;
    min-width:  970px;
}

Consider using media-queries to suit other formats, if applicable, as in this example:

.div-principal {
    margin-left: auto;
    margin-right: auto;
    max-width: 1300px;
    min-width:  970px;
}

@media (max-width: 970px) {
   .div-principal {
       margin-left: auto;
       margin-right: auto;
       max-width: 970px;
       min-width: 480px;
   }
   ... outras declaracoes adequadas para tamanho < 970 ...
}

  

If you do not want the "effect" of the page stretching, but only centering, put max-width and min-width to the same extent.

The tip of the media-queries has already been left and is the one that most probably fits your problem.
 In addition to the max-width and the min-width, you add a percentage width for your container to adapt the screen.  One tip for testing how your layout will fit on some screens is to use an iframe on a page and change its width ...
 But depending on your purpose, you may not even need media queries.

.container-fluid {
    margin: 0 auto;
    max-width: 1300px;
    min-width:  970px;
    background: #ddd;
    width: 80%;
}

link

But if you're going to use it, it's not at all difficult to adapt your layout to other resolutions, you just have to research the subject. Home Here are some interesting links:

• link
• link
• link