Kan som regel fikses med css, på HTML eller body.
body {
/* Disables pull-to-refresh but allows overscroll glow effects. */
overscroll-behavior-y: contain;
}
Kategori: CSS
Kategorier
Mobile first CSS skabelon
Tilrettes efter behov.
/* Mobile */
/* Tablet */
@media (min-width: 768px) {
}
/* Desktop */
@media (min-width: 960px) {
}
Kategorier
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;
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%;
}
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>