×
Clear all filters including search bar
Valeri Tandilashvili's CSS Notes
Results: 126
vw for font-size property 
h1 {
    font-size: 7vw;
}
full height with vh CODE 
.box {
  width: 50vw;
  height: 100vh;
  background: gray;
  color: white;
}
percentage vs viewport units 
percentage values are relative to the nearest ancestor element
viewport units are always relative to the browser window
JavaScript files in <head> tag is not best practice
background-position
These are alternatives:
background-position: right bottom;
background-position: 100% 100%;
background-position: bottom 0px right 0px;
background-position: right center;
background-position: 100% 50%;
background-position: left top;
background-position: 0% 0%;
background-position: left 0px top 0px
when sprites are not recommended to use
Sprites are usually good for multiple little icons and things like that but no good if you want to repeat something across or down a fluid height content element.
background-size: cover CODE
Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
viewport 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tag gives the browser instructions on how to control the page's dimensions and scaling. The line should always be included to create a responsive layout
horizontal menu items style for mobile device (two columns) 
@media screen and (max-width: 500px) {
    nav ul li {
        width: 50%;
        font-size: 120%;
    }
}
horizontal menu items style for small tablet & large mobile devices (three columns) 
@media screen and (max-width: 620px) {
    nav ul li {
        width: 33%;
    }
}
Results: 126