CODEWITHSUNDEEP
htmlcss
Michael
Michael

Reputation: 42100

Fitting thumbnails while page is resized

Suppose I display thumbnails (~200px width each) in a web page. In a midsize screen (e.g. 15") I can display 5 thumbnails in a row.

Now what if I resize the browser window so that 5 thumbnails don't fit the page width ? I would like the number of thumbnails to be changed automatically to fit the page.

For example: suppose, 5 thumbnails with spaces between them take ~2000 px. Now I am resizing the window. When the page width becomes < 2000 px but > 1600 px. I would like to display 4 thumbnails in a row and so on.

What HTML/CSS markup should I use to achieve that behavior ?

Upvotes: 0

Views: 129

Answers (3)

tewathia
tewathia

Reputation: 7308

I once made a fiddle to explain media queries to someone. You can use a similar design, although it's usually much simpler just to float:left or display:inline-block your elements and let the browser take care of the rest.

DEMO

Upvotes: 1

grc
grc

Reputation: 23575

You can use the float property for this:

float: left;

Floating elements will wrap when they do not fit in the parent's width.

Example (try resizing the page)

Upvotes: 1

Ranveer
Ranveer

Reputation: 6871

One way is to use a responsive layout. Twitter Bootstrap provides the same by default.

Another way is by using @media tags. Refer http://www.w3schools.com/css/css_mediatypes.asp . Here, you will need to make a function like this: Get the screen size using mediacheck and then set up thresholds using @media.

Upvotes: 1

Related Questions