Difference between id and name attributes in HTML

The name attribute is used when sending data in a form submission. Different controls respond differently. For example, you may have several radio buttons with different id attributes, but the same name. When submitted, there is just the one value in the response – the radio button you selected. Of course, there’s more to it than that, but it will … Read more

Maintain the aspect ratio of a div with CSS

Just create a wrapper <div> with a percentage value for padding-bottom, like this:  Run code snippetExpand snippet It will result in a <div> with height equal to 75% of the width of its container (a 4:3 aspect ratio). This relies on the fact that for padding : The percentage is calculated with respect to the width of the generated box’s containing block … Read more

What does the shrink-to-fit viewport meta attribute do?

It is Safari specific, at least at time of writing, being introduced in Safari 9.0. From the “What’s new in Safari?” documentation for Safari 9.0: Viewport Changes Viewport meta tags using “width=device-width” cause the page to scale down to fit content that overflows the viewport bounds. You can override this behavior by adding “shrink-to-fit=no” to your meta tag as shown … Read more

Flexbox: center horizontally and vertically

I think you want something like the following.  Run code snippetExpand snippet See demo at: http://jsfiddle.net/audetwebdesign/tFscL/ Your .flex-item elements should be block level (div instead of span) if you want the height and top/bottom padding to work properly. Also, on .row, set the width to auto instead of 100%. Your .flex-container properties are fine. If you want the .row to be centered vertically in the view port, assign … Read more

How to reference nested classes with css?

In CSS, classes need to be prefixed by a ., ids need to be prefixed by #, and elements don’t need to be prefixed at all. This is how you need to declare your CSS: Note that box1 and box-body are both classes, while i is an element. Example: I have listed three different <div> elements. This is how they would be accessed in CSS: } // second div … Read more

Should I use px or rem value units in my CSS?

TL;DR: use px. The Facts First, it’s extremely important to know that per spec, the CSS px unit does not equal one physical display pixel. This has always been true – even in the 1996 CSS 1 spec.CSS defines the reference pixel, which measures the size of a pixel on a 96 dpi display. On a display that has a dpi substantially different than 96dpi (like … Read more