Home/ Questions/Q 6536973
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T10:33:41+00:00

Can someone explain how http://cssgrid.net/ achieves the effect that when the browser width is

  • 0

Can someone explain how http://cssgrid.net/ achieves the effect that when the browser width is below a certain amount, the layout switches from 3-column to single-column?

I’ve tried turning off javascript, and inspecting the CSS of .row and .container but my knowledge of CSS is lacking. There’s a min-width property but changing it via Firebug doesn’t seem to affect much.

Could someone point out what in the CSS is causing the change?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    @ben; for this need to use mediaqueries .It’s new property in which we define the css according to the width. Like this:

    <link rel="stylesheet" href="stylesheets/apx.css" type="text/css" media="screen" title="no title" />
<link rel="stylesheet" href="stylesheets/new-css.css" type="text/css" media="screen and (max-width: 600px)" title="no title" />

    In the above example the apx.css is your default css & and new-css.css apply when your screen width decrease to 600px.

    That a best link for your answer http://css-tricks.com/6206-resolution-specific-stylesheets/

    Check this for more http://webdesignerwall.com/tutorials/css3-media-queries

    • 0