Apply Google Fonts
How to use Google Fonts


Word Break

overflow-wrap: normal | break-word ;

Pretty Ribbon

Media queries for standard devices

Flex Property

Horizontal list of div items
.outer {
display: flex;
flex-flow: row wrap;
background-color: #f7f7f7;
justify-content: center;
align-items: center;

.item {
float: left;
width: 24%;

margin: auto;
min-height: 250px;
margin-bottom: .6em;

Place a video play button inside an image

Font Awesome

function cacl()
Push the width outside the container to 100% of the screen:
margin: 0 calc(-50vw + 50%)

CSS Units

Place text over an image

CSS Tips