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

Asked

Viewed 230 times

5

I need to make a site that has a minimum resolution of 970px, but that fits up to 1300px wide.

Researching, I found something like this:

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

But how about the minimum? How could I stay? I need to use Bootstrap for this?

css

2 answers

5


Basically adding min-width.

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

Consider using media-queries to meet other formats, if any, 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 centering only, put max-width and min-width in the same measure.

  • Thank you! I would not like version for mobile, nor tablet. In case it would be displayed the normal site in 970px... Do I still need to use media queries? And in case I could abandon bootstrap in this project?

  • It would probably be too much to use bootstrap for something just on desktop screen. These basic css definitions you can simply apply to the main <div> of the page. If it’s desktop only, forget @media.

  • Beware of using the @media. IE8 will not work.

  • Thank you very much friend! The problem was solved with the use of Media Queries same!

  • @Marcus dispose. Then try the alternatives proposed in the question and take a general look at the subject, many things you will see that the simple CSS solves for you in a good.

1

The media-queries tip has already been left and is what most fits your problem probably.
In addition to max-width and min-width, you add a width with percentage for your container to adapt to the screen.
A tip to test how your layout will adapt on some screens is to use an iframe on a page and change the width of it...
But depending on your goal, you may not even need media queries.

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

http://jsfiddle.net/Wagner/LXvAE/2/embedded/result/

But if you are going to use, it is not difficult to adapt your layout to other resolutions, just give a search on the subject.
Here are some interesting links:

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.