Kategorier
CSS PWA

Forhindre Android Chrome pull-to-refresh

Kan som regel fikses med css, på HTML eller body.

body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
}
Kategorier
CSS

Mobile first CSS skabelon

Tilrettes efter behov.

/* Mobile */


/* Tablet */
@media (min-width: 768px) {
   
}

/* Desktop */
@media (min-width: 960px) {
	
}
Kategorier
CSS

Vertikal center i div

Umuligt at huske, men brugbart 🙂

/*Internet explorer 10*/
    display: -ms-flexbox;
    -ms-flex-pack: center;
    -ms-flex-align: center;
    /*Firefox*/
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;
    /*Safari, Opera and Chrome*/
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    /*W3C*/
    display: box;
    box-pack: center;
    box-align: center;
Kategorier
CSS HTML

Responsiv video embed

Embedded video fra Youtube eller Vimeo er som udgangspunkt ikke responsivt, men har en fast størrelse. Nedenstående gør at videoen tilpasser sig den container den ligger i.

HTML:



<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>


CSS

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
Kategorier
CSS HTML

HTML5 side skabelon

Tom html5 skabelon med viewport og link til stylesheet.

<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="wrapper">

</div>
</body>
</html>