CSS für Smartphone

Alle CSS-Kommandos speziell für die Mobil-Version des Blogs. Die Kommandos deaktivieren zum Beispiel Desktop-Design, das in der Mobil-Vorlage stört.

---

Vorlage > Mobil

Damit eigene CSS-Kommandos für die Mobilvorlage Wirkung zeigen, muss die Mobilvorlage auf "Benutzerdefiniert" gestellt sein.

Vorlage > Anpassen > Erweitert > CSS hinzufügen

/* BODY - Mobil
 - - - - - - - - - - - - - - - - - - - - */

/* Äußerer Hintergrund: OHNE Image am linken Rand
 . . . . . . . . . . . . . . . */
body.mobile, .mobile .body-fauxcolumn-outer .cap-top .cap-left {
background: none top left repeat-y scroll;
}


/* COOKIE-HINWEIS - Mobil
 - - - - - - - - - - - - - - - - - - - - */

.mobile #HTML4 {
border-top: 2px dotted #fff;
border-bottom: 2px dotted #fff;
border-left: none;
}
.mobile .cookie-hinweis-gadget-text-mobil {
display: block;
}
.mobile .cookie-hinweis-gadget-text-web {
display: none;
}


/* CONTENT-OUTER - Mobil
 - - - - - - - - - - - - - - - - - - - - */

/* Schatten-Rahmen entfernt
 . . . . . . . . . . . . . . . */
.mobile .content-outer {
box-shadow:none;
}


/* HEADER-OUTER - Mobil
 - - - - - - - - - - - - - - - - - - - - */

/* Geringerer Abstand zum Select-Menü
 . . . . . . . . . . . . . . . */
.mobile .header-outer {
margin-bottom:0px;
}


/* HEADER - Mobil
 - - - - - - - - - - - - - - - - - - - - */

/* Header-Description lesbar gemacht
 . . . . . . . . . . . . . . . */
.mobile .titlewrapper {
float:none;
}
.mobile #Header1 .description {
margin-top:-20px;
}

/* Header-Description Abstand nach links
 . . . . . . . . . . . . . . . */
.mobile .description span {
padding-left:5px;
}


/* PAGELIST - MOBIL
 - - - - - - - - - - - - - - - - - - - - */

.mobile .tabs-inner .PageList .widget-content {
background-color: #031440;
}
#PageList1_select {
font-weight:bold;
}
.mobile #PageList2 {
display:block;
}
.mobile-desktop-link {
display:none;
}


/* POSTS - MOBIL
 - - - - - - - - - - - - - - - - - - - - */

/*Drei Kommandos für verbesserte Antippbarkeit von Links in Posts bzw. auf Seiten der Mobilversion. Das dritte Kommando wird nur dann wirksam, wenn man eine Liste mit der Klasse "linkliste" markiert.*/
.mobile .post-body {
line-height:1.6;
}

.mobile .post-body a {
padding:5px;
}

.mobile .linkliste li {
margin-bottom:10px;
}

/*Kommandos, durch die Listen in der Mobilversion nicht eingerückt werden.*/
.mobile .post-body ul,.mobile .post-body ol {
margin-left:0px;
padding-left:20px;
}

.goog-inline-block {
display:none;
}


/* KOMMENTARE - MOBIL
 - - - - - - - - - - - - - - - - - - - - */

.mobile .avatar-image-container, .mobile .avatar-image-container img {
border-radius:60px;
border:3px double #dddddd;
}