CODEWITHSUNDEEP
javascriptjqueryhtmlcssresize
Bradley Mitchell
Bradley Mitchell

Reputation: 287

How to make point where divs stop shrinking with browser size

There are a lot of dynamically designed websites out there where there divs or images shrink as the browser size decreases.

An example of this would be http://en.wikipedia.org/wiki/Main_Page

The div in which the text is in shrink as the browser size decreases. This happens up until a certain point, where it just decides to stop shrinking, and just start to cover the text boxes.

I would like to do this effect with a JSFiddle I am working on: http://jsfiddle.net/MrLister/JwGuR/10/

If you stretch the size of the fiddle, you will see the pictures dynamically adapt. The goal is to make it just stop shrinking at a certain point, and just start covering or caving in on this pictures. I want to do this because eventually it gets so small that they text on each image overlaps and it looks bad.

Here is the CSS for the Fiddle:

.figure {
    position: relative;
    display:inline-block;
    max-width: 33%;
}

.figure .figcaption {
    text-align: center;
    height:0;
    top: 40%;
    width: 100%;
    font-size: 55px;
    color: white;
    position: absolute;
    z-index: 1;
}

.figure img {
    display: block;
    max-width: 100%;
}

Upvotes: 8

Views: 22839

Answers (3)

Zera42
Zera42

Reputation: 2692

  min-width:500px;

would cause the window to have a minimum width of 500px. http://jsfiddle.net/JwGuR/14/ after you reach 500px the images stop resizing.

Upvotes: 3

Jake
Jake

Reputation: 4234

Simply add a min-width size to the things you want to stop shrinking :)

Like so: 

.figure {
    position: relative;
    display: inline-block;
    max-width: 33%;
    min-width: 150px;
}

Here's an updated fiddle: http://jsfiddle.net/jakelauer/JwGuR/13/

Upvotes: 16

Kai Qing
Kai Qing

Reputation: 18833

Here is an example of media queries. You use css to define min and max widths for certain cases. In your case, just give a max-width case and set the css properties there.

http://css-tricks.com/css-media-queries/

img{
    width:100%;
}

@media all and (max-width: 699px) {
  img{
    width:500px;
  }
}

This is a basic example. As Jake said, you can also just give it a min-width but in many cases, the layout of the page should change for mobile or tablet view where simply defining a min-width won't suffice

Upvotes: 1

Related Questions