Wenn man eine Website dem Desktop eines mobilen Gerätes hinzufügt, ist es sinnvoll, dort eine passende Grafik anzuzeigen. Das Stichwort heißt „apple-touch-icon“ und wird in den Head-Bereich des Templates eingebunden. <link rel=“apple-touch-icon“ href=“/apple-touch-icon.png“ /> hat man erschiedene Größen, dann: <link rel=“apple-touch-icon“ sizes=“76×76″ href=“/apple-touch-icon-76.png“ /> für alle Größen. Die Icons kann man bequem online erstellen, z.b. […]
Kategorie: responsiv
iframes responsiv einbinden
my solution: 1. embed the youtube vidoes with the code, youtube offers, for example: <iframe width=“560″ height=“315″ src=“https://www.youtube.com/embed/lmFXThtn014?rel=0″ seamless=“seamless“ allowfullscreen></iframe> 2. define css-classes: .video-container { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; } .video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; } 3. put a div around the iframe <div class=“video-container“><iframe…..></iframe></div> Thanks to […]
Tabellen responsiv machen
Ein paar CSS-tipps, um Tabellen für schmale Bildschirme nutzbar zu machen: Tabelle mit einem Div umschließen, das folgende Klasse hat: .table-container { width: 100%; overflow-y: auto; _overflow: auto; margin: 0 0 1em; } Scrollbalken für os und ios: .table-container::-webkit-scrollbar { -webkit-appearance: none; width: 14px; height: 14px; } .table-container::-webkit-scrollbar-thumb { border-radius: 8px; border: 3px solid #fff; […]
Neueste Kommentare