How to make divs stop shrinking with browser size

Question

There are many dynamically designed websites where, with a decrease in browser size, images are reduced or reduced.

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

div in which text decreases as the size of the browser decreases. This happens until a certain point, when he simply decides to stop shrinking and just starts to close the text fields.

I would like to make this effect using the JSFiddle I'm working on: http://jsfiddle.net/MrLister/JwGuR/10/

If you stretch the size of the violin, you will see that the images adapt dynamically. The goal is to make it just stop shrinking at a certain point and just start overlaying or going around in these pictures. I want to do this because in the end it becomes so small that the text in each image overlaps and it looks bad.

Here is the CSS for the script:

.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%; } 

Answer 1

Just add the min-width size to the ones you want to stop shrinking :)

Same:

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

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

Answer 2

  min-width:500px; 

will cause the window to have a minimum width of 500 pixels. http://jsfiddle.net/JwGuR/14/ after you reach 500 pixels, the image will stop resizing.

Answer 3

Here is an example of media queries. You use css to determine the minimum and maximum width for certain cases. In your case, just specify the case of maximum width 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 minimum width, but in many cases the page layout needs to change for a mobile or tablet view, where simply defining the minimum width will not be enough.