Menu
Check out: http://thinkvitamin.com/
As you decrease the browser size, at some point the right column simply disappears. Pretty nice downgrading, and this makes for quite a flexible design. I do not see, however, any special CSS going on. Is this Javascript, or can this somehow be achieved with CSS only?
681
Usually, to hide an element from view, you use the 'display' property and set it to 'none'. But CSS also has a property called 'visibility', which hides elements in a different way. In particular, we use 'visibility: collapse' here, which is designed especially for hiding table columns and rows.
Using width attribute: The <td> tag has width attribute to control the width of a particular column. By assigning a numeric value to this attribute between 0 to 100 in terms of percentage(or you can use pixel format). We can restrict the column width up to that much percentage of the table's total width.
This is being done with pure CSS, namely with CSS3's Media Queries.
The spec: http://www.w3.org/TR/css3-mediaqueries/
A tutorial: http://webdesignerwall.com/tutorials/css3-media-queries
Browser support: http://caniuse.com/css-mediaqueries (works "everywhere" except IE8 and lower)
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
