1. Responsive Video for RWD This responsive video CSS trick was once discovered with the aid of tjkdesign.com. I’ve read about it earlier than, you may learn the main points here. It makes the video embed to increase full width to the boundary.

2. Min & Max Width Max-width property allows you to set the max width of the detail. The purpose of max-width is to restrict the detail from extending the boundary. In the illustration under, I specify the container to show at 800px if possible, nevertheless it will have to no longer exceed 90% of the boundary width. Min-width is opposite to max-width. It sets the minimal width of an aspect. In the instance type under, min-width is used on the enter textual content discipline to avoid the input from getting very small when cutting down.

3. Relative Values In responsive design, knowing when to make use of relative worth can simplify the CSS and maximize the great design outcome. Under are some examples.

Relative Margin Below is an example of a comment list where relative left margin is used to area out the threaded feedback. Instead of making use of constant pixel price, I used percent worth to house out the sub-lists. As proven on the left aspect of the screenshot, the content box within the sub-lists will get very small on cell resolution if pixel left margin used to be used.

Relative Font dimension With relative value (eg. em or %), the font dimension, line-top and margin spacing can also be inherited. For instance, I can alternate the font measurement on all descendant factors through conveniently altering the font-dimension on the dad or mum element.

Relative Padding The screenshot beneath indicates it is better to make use of relative percentage padding versus constant pixel padding. The box on the left indicates an unbalanced padding area if pixel padding used to be used. The box with percentage padding on the right suggests that the content discipline is maximized.

4. Overflow: hidden Trick As posted in my prior article, you can clear float with the overflow property. This trick is extremely valuable. That you could clear the glide from the previous element and keeps the content material strolling inside the container by means of making use of overflow: hidden.

5. Word-wreck I additionally talked about the word-wrap property before. That you may force unbraiding text (eg. lengthy URL textual content) to wrap rather of running in a single line.

.break-word {
word-wrap: break-word;
}