CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Giorgi Nakeuri
Giorgi Nakeuri

Reputation: 35790

Fixed size bootstrap container

I am trying to make container fixed size 750px for all sized windows. Here is HTML:

<div class="container">
        <div class="thumbnail" >
            ..........<br/>
            ..........
        </div>
</div>

and custom CSS:

   @media (min-width: 1200px) {
    .container {
        width: 750px;
    }

    @media (min-width: 992px) {
    .container {
        width: 750px;
    }

    @media (min-width: 768px) {
    .container {
        width: 750px;
    }

But the problem is when I am resizing window from big to small at some point size of thumbnail is getting a little larger and then reverses to its initial size.

Here is a fiddle http://jsfiddle.net/Wy22s/718/ . You can just resize browser window or slide inner window in fiddle itself to left and then to right to reproduce this behavior.

I have tried to add another div with row class. Tried combinations with col-sm, col-md etc, but I can not manage to achieve desired behavior. How can I fix this so the container/thumbnail size stays the same?

Upvotes: 0

Views: 6413

Answers (1)

Alaksandar Jesus Gene
Alaksandar Jesus Gene

Reputation: 6887

you forgot to close the @media brackets.

    @media (min-width: 1200px) {
    .container {
        width: 750px !important;
    }
}
    @media (min-width: 992px) {
    .container {
        width: 750px !important;
    }
}
    @media (min-width: 768px) {
    .container {
         width: 750px !important;
    }
}


.container{ width: 750px !important;}
.thumbnail{ width: 750px !important;}

Upvotes: 2

Related Questions