/* Theme Name: MH Magazine Lite Child-Theme Theme URI: https://www.mhthemes.com/themes/mh/magazine-lite/ Description: MH Magazine Lite Child Theme Author: MH Themes (parent theme), M. Razzaq (all customizations) Author URI: 1. https://www.mhthemes.com/ (parent-theme), 2. http://top-tutorials-and-templates.com (child-theme) Template: mh-magazine-lite Version: 1.0.0 License: GNU General Public License v2.0 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: right-sidebar, responsive-layout Text Domain: mh-magazine-lite-child */ /*ACHTUNG/MERKE: Am obigen Header erkennt Wordpress, dass dies hier ein CHILD-Theme ist und liest zuerst die Styles des PARENT-Themes ein. /*ABER ACHTUNG: Das PARENT-Verzeichnis ermittelt Parent, indem es im THEME-Ordner das im obigen Header (bei "Template:") angegebene Verzeichnis ansteuert. Sprich: /*=============> WENN oben (bei "TEMPLATE: " eine SCHREIBFEHLER vorliegt oder GROSS/KLEINSCHREIBUNG FALSCH ist, findet Wordpress das Verzeichnis NICHT! */ /* Laden der CSS-Regeln des PARENT-Themes: */ /* ALTE Vorgehensweise um das PARENT-Theme einzubinden! (funzt noch, aber wurde ersetzt durch eine "moderne" Variante, die /* vorsieht, dass man stylesheets in der functions.php per Wordpress's PHP.Funktion "wp_enqueue_script()" einbindet (was /* den Vorteil hat, dass man bei dieser Art von Einbindung auch dafür sorgen kann, dass Userseitig immer das NEUESTE Stylesheet /* geladen wird (statt das Stylesheet in CACHE des Usewrs zu suchen, was dazu führt dass der USer Änderungen NICHT sieht */ /* @import url("../mh-magazine-lite/style.css"); //--> gemäß Wordpress-Codex lade ich alle CSS-Styles stattdessen per wp_enqueue_style() (siehe functions.php) ! */ /* START MEINER "EIGENEN" STYLES, die die Original-Stles "ÜBERSCHREIBEN": */ /* VOREINSTELLUNGEN (= ABWEICHENDE SCHRIFT UND SCHRIFT-SETTINGS: */ /* Laden + namentlich Deklarieren einer vom Theme abweichenden Schrift: */ @import url('https://fonts.googleapis.com/css?family=Open+Sans'); @font-face { font-family: "Open Sans"; src: local("Open Sans Regular"), local("OpenSans-Regular"), url("https://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2") format("woff2") url("https://fonts.googleapis.com/css?family=Open+Sans") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; } .body { /* Schriftart: */ font-family: 'Open Sans', sans-serif !important; font-size: 13px !important; font-style: normal; font-weight: 400 !important; color: #333 !important; background: url(../images/bg.png) repeat !important; /* Silbentrennung: */ -webkit-hyphens: auto !important; -webkit-hyphenate-limit-chars: auto 3 !important; -webkit-hyphenate-limit-lines: 4 !important; -ms-hyphens: auto !important; -ms-hyphenate-limit-chars: auto 3 !important; -ms-hyphenate-limit-lines: 4 !important; hyphens: auto !important; } h1, h2, h3, h4, h5, h6 { font-weight: normal !important; font-weight: 500 !important; } /* GESAMT-LAYOUT DER SEITE: */ /* Damit die Gesamt-Seite bzw. der CONTAINER IN DEM DIE INHALTE (HEADER bis FOOTER) STECKEN, DIE BREITE AUSNUTZT: */ .mh-container-outer { width:98% !important; max-width: initial !important; } /* Aufhebung der vom Hersteller des Original-Themes vorgegebene MAXIMAL-BREITE (welche Header + Menü + Footer betraf): */ .mh-container, .mh-container-inner { max-width: initial !important; } /* Da der Hersteller per HTML-ATRRIBUT width im HTML-Code (nicht in CSS) dafür gesorgt hat, dass die Maximale Breite 1500px sein soll, ist das Header- Bild - sofern der Bildschrim breit genug ist - rechts ZU KURZ! Folgende Regel bewirkt, dass dass Bild in solchen Fällen auf 100% der Seitenbreite gestreckt wird! */ .mh-header-image { width: 100% !important; } /* Auf großen Displays: Einen ANDEREN HINTERGRUND als ich im Wordpress-Backend /* eingestellt habe! Denn der eingestellte Hintergrund ist NUR FÜR HANDYS gut! */ @media screen and (min-width: 767px) { body { background: initial !important; /* = RESETTEN der Background-Eigenschaft*/ background: lightblue !important; /* = RESETTEN der Background-Eigenschaft*/ } .mh-container-outer { margin-top:5px !important; } } /* HAUPT-BEREICH GRÖSSER MACHEN als im Original-Theme + SIDEBAR KLEINER MACHEN als im Original-Theme: */ .mh-wrapper > .mh-content, .mh-wrapper > .mh-content.mh-home-content { width:75% !important; } .mh-wrapper > .mh-sidebar { width:22% !important; } /* Die SIDEBAR-POSTS in der SideBar etwas KLEINER und ENGER anzeigen als auf der Startseite: */ .mh-wrapper aside.mh-sidebar.mh-widget-col-1 .mh-custom-posts-widget .mh-custom-posts-thumb { zoom: 0.90 !important; } .mh-wrapper aside.mh-sidebar.mh-widget-col-1 .mh-custom-posts-widget .mh-custom-posts-item { padding: 10px !important; } .mh-wrapper aside.mh-sidebar.mh-widget-col-1 .mh-custom-posts-widget .mh-custom-posts-header .mh-custom-posts-small-title { font-size: 13px !important; } .mh-wrapper aside.mh-sidebar.mh-widget-col-1 .mh-custom-posts-widget .mh-custom-posts-header .mh-custom-posts-meta { /* display: none !important; */ } /* Auf KLEINEN Displays: Sidebar nach UNTEN schieben: */ @media screen and (max-width: 767px) { .mh-wrapper > .mh-content, .mh-wrapper > .mh-content.mh-home-content { width:100% !important; } .mh-wrapper > .mh-sidebar { width:100% !important; } } /* Auf großen Displays (die ja eine Sidebar haben, die ja auch schon eine TagCloud hat): /* Die TagCloud die UNTER dem Haupt-Bereich (nicht der Sidebar) steht AUSBLENDEN, damit sie NUR AUF HANDYS sichtbar ist! */ @media screen and (min-width: 768px) { .mh-home-content .mh-widget.widget_tag_cloud { display:none; } } /* UNTERSCHIEDLICHE HEADER-BILDER - JE NACH GERÄT: /* A: Header-Layout für (a) "normale" PCs und (b) URALT-Browser, die KEINE MEDIA-QUERIES kennen: */ /* 1: Das GROSSE (= "QUADRATISCHE") Header-Bild (das auf Breit-Bildschirme´n zu viele Tiefe wegnimmt und daher NUR AUF DEM HANDY geeignet ist) erstmal GENERELL AUSBLENDEN: */ .mh-header-image-link { display: none !important; } /* 2: TEXT-basierte FIRMEN-NAMEN-DIVs bitte AUSBLENDEN (da ich ja - als Alternative zur TEXT-basierte Firmennamen-Angabe (welche aufgrund mangelnder Font-Resize-Möglichkeiten NICHT für BEIDE Screen-Größen geeignet ist) - ein LOGO habe. */ .mh-site-identity .mh-header-text { display: none !important; } /* 3: Als Alternative zum in Punkt 2 erwähnten TEXT-Header: Logo-Banner einblenden (= Bild, wo der Text bereits INTEGRIERT ist! = Muss im Gegensatz zu TEXT-basierten Firmennamen NICHT an verschiedene Bildschirmgrößen & Endgerät angepasst werden, sondern sieht auch dort DIREKT gut aus. */ .mh-site-identity .mh-site-logo { display: block !important; padding:0px !important; } /* B: Header-Layout für Geräte die Media Queries verstehen: */ /* Abhängig von der Größe entweder Logo-Bild (= rechteckig) oder Header-Bild (Quadratisch) einblenden */ /* 1: Auf HANDYS: (a) Das "QUADRATISCHE + GROSSE" Header/Logo-Bild EINBLENDEN und (b) das obige LOGO-Banner (= rechteckig) dafür AUSBLENDEN. */ @media screen and (max-width: 767px) { /* Quadrat-Bild (inkl. Firmenname) einblenden: */ .mh-header-image-link { display: block !important; } /* Dafür den LOGO-Banner (= rechteckig) AUSBLENDEN */ .mh-site-identity .mh-site-logo { display: none !important; } } /* MENÜ-ICON (nur sichtbar auf KLEINEN Displays): */ /* Falls das Menü nach LINKS soll: */ /**/.slicknav_btn { /* clear: both; float: left; */ } /* -----------------> Nötig, wenn der Menü-Button nach LINKS soll! /* Menu-Text: */ .slicknav_btn::after, /* ---> Wenn das Menu nach LINKS soll würde man hier BEFORE nehmen, damit der Text RECHTS vom Button erscheint! */ .slicknav_btn:after { content: 'Menü '; font-size:18px; color:#fff !important; position: absolute; right: 35px; /* ---> Wenn das Menu nach LINKS soll würde man hier LEFT nehmen, damit der Text RECHTS vom Button erscheint! */ } /* HOME/HÄUSCHEN-SYMBOL auf KLEINEN Displays anders stylen: */ @media screen and (max-width: 767px) { .meinPerJavacriptHinzugefuegterHomeButton { background-color: initial !important; margin: 0px !important; padding:0px !important; } .meinPerJavacriptHinzugefuegterHomeButton a { margin: 2px 5px !important; padding: 5px 10px !important; } .meinPerJavacriptHinzugefuegterHomeButton a span { font-size: 19px !important; } } /* MENÜ-HOVER-FARBEN */ .mh-main-nav > div > ul > li:nth-child(2):hover, .mh-main-nav > div > ul > li:nth-child(2):hover > a, .mh-main-nav > div > ul > li:nth-child(2) li:hover, .mh-main-nav > div > ul > li:nth-child(2) li:hover > a { background-color: #e8357c !important; color:#fff !important; } .mh-main-nav > div > ul > li:nth-child(3):hover, .mh-main-nav > div > ul > li:nth-child(3):hover > a, .mh-main-nav > div > ul > li:nth-child(3) li:hover, .mh-main-nav > div > ul > li:nth-child(3) li:hover > a { background-color: #81d742 !important; color:#fff !important; } .mh-main-nav > div > ul > li:nth-child(4):hover, .mh-main-nav > div > ul > li:nth-child(4):hover > a, .mh-main-nav > div > ul > li:nth-child(4) li:hover, .mh-main-nav > div > ul > li:nth-child(4) li:hover > a { background-color: #ffaf36 !important; color:#fff !important; } .mh-main-nav > div > ul > li:nth-child(5):hover, .mh-main-nav > div > ul > li:nth-child(5):hover > a, .mh-main-nav > div > ul > li:nth-child(5) li:hover, .mh-main-nav > div > ul > li:nth-child(5) li:hover > a { background-color: #50c7ff !important; color:#fff !important; } .mh-main-nav > div > ul > li:nth-child(6):hover, .mh-main-nav > div > ul > li:nth-child(6):hover > a, .mh-main-nav > div > ul > li:nth-child(6) li:hover, .mh-main-nav > div > ul > li:nth-child(6) li:hover > a { background-color: #5999e9 !important; color:#fff !important; } .mh-main-nav > div > ul > li:nth-child(7):hover, .mh-main-nav > div > ul > li:nth-child(7):hover > a, .mh-main-nav > div > ul > li:nth-child(7) li:hover, .mh-main-nav > div > ul > li:nth-child(7) li:hover > a { background-color: #f543cf !important; color:#fff !important; } /* Menü-UNTERBALKEN: */ .mh-main-nav { border-bottom-width: 4px !important; } /* Menü "STICKY" machen (bzw. den dafür vorgesehenen Container, den ich per Javascript /* erstellt und mit der hiesgen Klasse versehen habe und in den ich das Menü packe sobald /* der User weit genug gescrollt hat: */ .mein-sticky-menue { position: fixed; top: 0; width: 100%; z-index: 999999; /* --> damit die Leiste - wenn man eingeloggt ist - VOR DER WORDPRESS-LEISTE erscheint!*/ } .mein-sticky-menue .mh-main-nav-wrap { background-color: #454752; border-top: 2px solid red; } /* Damit das "Umhängen" nicht dazu führt, dass der Rest der Seite NACH OBEN SPRINGT (weil /* das Menü ja jetzt aus der DOM-Reihenfolge genommen wurde): PADDING DES HAUPT-BEREICHES /* UM DIE BREITE (bzw. HÖHE) DES MENÜS ERHÖHEN (von derzeit 25px auf 60px): */ .hauptBereichDerSeiteNachdemDasMenueEntnommenUndObenAngeheftetWurde { padding-top: 60px; } /* Auf KLEINEN Bildschirmen: Das Menü ANDERS EINFÄRBEN, da man es dort sonst übersieht! */ @media screen and (max-width: 767px) { .mein-sticky-menue .mh-main-nav-wrap { background-color: #454752; border-top: 2px solid red; } } /* FARB-ETIKETT-BOXEN: */ /* Die UNTERSTRICHE der Kategorie/Widget-Überschriften näher an die Überschriften ranrücken */ /* und anders einfärben (hier erstmal alle in der SELBEN Farbe): */ .mh-widget h4.mh-widget-title { /**/ padding-bottom: 0px; border-bottom: 2px solid #d6d6d6; margin-bottom: 12.5px !important; } /* FARB-ETIKETTEN pro Artikel-Vorschau-Container (mitsamt zugehäriger UNTERSTRICHE) UNTERSCHIEDLICH EINFÄRBEN: MERKE: Die Kategorien befinden sich in den Widget-Bereichen 3 und 4 einer per STARTSEITE-TEMPLATE-DES-THEMES angelegten Wordpress-"Seite". Das Original-Theme gibt dieser Seite die Klasse mh-home und deren Widget- Bereichen die Klassen mh-home-area-3 und mh-home-area 4. =======> WICHTIG DABEI: Die Kategorie-Listen 1, 3 und 5 liegen im mh-home-area 3 (= linke Spalte) und die die Kategorie-Listen 2, 4 und 6 im Bereich mh-home-area-6 (= rechte Spalte) */ /* Farb-Etikett 1: */ .mh-home-area-3 .mh-widget:nth-child(1) .mh-widget-title { border-bottom-color: #e8357c !important; } .mh-home-area-3 .mh-widget:nth-child(1) .mh-widget-title-inner { background-color: #e8357c !important; color: #fff; padding: 6px 12px; display: inline-block; } .mh-home-area-3 .mh-widget:nth-child(1) .mh-custom-posts-header a:hover { color: #e8357c !important; } /* Farb-Etikett 2: */ .mh-home-area-4 .mh-widget:nth-child(1) .mh-widget-title { border-bottom-color: #81d742 !important; } .mh-home-area-4 .mh-widget:nth-child(1) .mh-widget-title-inner { background-color: #81d742 !important; color: #fff; padding: 6px 12px; display: inline-block; } .mh-home-area-4 .mh-widget:nth-child(1) .mh-custom-posts-header a:hover { color: #81d742 !important; } /* Farb-Etikett 3: */ .mh-home-area-3 .mh-widget:nth-child(2) .mh-widget-title { border-bottom-color: #ffaf36 !important; } .mh-home-area-3 .mh-widget:nth-child(2) .mh-widget-title-inner { background-color: #ffaf36 !important; color: #fff; padding: 6px 12px; display: inline-block; } .mh-home-area-3 .mh-widget:nth-child(2) .mh-custom-posts-header a:hover { color: #ffaf36 !important; } /* Farb-Etikett 4: */ .mh-home-area-4 .mh-widget:nth-child(2) .mh-widget-title { border-bottom-color: #50c7ff !important; } .mh-home-area-4 .mh-widget:nth-child(2) .mh-widget-title-inner { background-color: #50c7ff !important; color: #fff; padding: 6px 12px; display: inline-block; } .mh-home-area-4 .mh-widget:nth-child(2) .mh-custom-posts-header a:hover { color: #50c7ff !important; } /* Farb-Etikett 5: */ .mh-home-area-3 .mh-widget:nth-child(3) .mh-widget-title { border-bottom-color: #5999e9 !important; } .mh-home-area-3 .mh-widget:nth-child(3) .mh-widget-title-inner { background-color: #5999e9 !important; color: #fff; padding: 6px 12px; display: inline-block; } .mh-home-area-3 .mh-widget:nth-child(3) .mh-custom-posts-header a:hover { color: #5999e9 !important; } /* Farb-Etikett 6: */ .mh-home-area-4 .mh-widget:nth-child(3) .mh-widget-title { border-bottom-color: #f543cf !important; } .mh-home-area-4 .mh-widget:nth-child(3) .mh-widget-title-inner { background-color: #f543cf !important; color: #fff; padding: 6px 12px; display: inline-block; } .mh-home-area-4 .mh-widget:nth-child(3) .mh-custom-posts-header a:hover { color: #f543cf !important; } /* Etikett-umrahmende Box so stylen, dass nicht mehr deren Text sondern die GESAMT-BOX MITSAMT GEFÄRBTEM PADDING-BEREICH GENAU AUF DER LINIE liegt: */ .mh-wrapper .mh-widget .mh-widget-title-inner { display: inline-block; } /* Etikett-Überschriften WEISS stylen! Auch jene, die selbst KEINE Links sind also NICHT anklickbar sind: */ .mh-home-area-3 .mh-widget .mh-widget-title-inner, .mh-home-area-3 .mh-widget .mh-widget-title-inner a, .mh-home-area-4 .mh-widget .mh-widget-title-inner, .mh-home-area-4 .mh-widget .mh-widget-title-inner a { color: #fff; } /* INHALTS-CONTAINER JE FARB-ETIKETT-BOX: */ /* Container der Artikel-Teaser: */ .mh-content.mh-home-content .mh-custom-posts-widget li { margin:0px; padding:7.5px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); margin-right: 1px; /* --> sonst ist kein Platz für den obigen Schatten! */ } /* Text der Artikel-Teaser: */ .mh-content.mh-home-content .mh-custom-posts-header .mh-custom-posts-small-title, .mh-content.mh-home-content .mh-custom-posts-header .mh-custom-posts-small-title a { font-family: 'Open Sans', sans-serif !important; font-size: 16px; font-weight: bold !important; color: #232323 !important; line-heigt: 1.2; } /* Auf KLEINEN Displays: */ /* Die Bilder der Zusammenfassungs-Seiten je Kategorie/Tag von Original max-width:80px auf max-width:130px hochsetzen: */ /* (Auf GROSSEN Displays ist das NICHT nötig, weil diese Bilder dort bereits AB WERK groß dargestellt werden) */ @media screen and (max-width: 767px) { .mh-loop-item .mh-loop-thumb { max-width: 130px !important; } .mh-loop-item .mh-loop-title { font-size: 20px !important; } } /* SLIDER-WIDGET DER STARTSEITE: */ .mh-slider-widget.mh-slider-large { /* Rahmen und Hintergrund erstellen, weil die Beschriftung sonst bei fOTOS DIE NICHT breit genug sind AUSSEN hängt. */ border:1px solid #f1f3e3 !important; background-color: #fbfbfb; /* Nur für ZWEI-SPALTIGE-Slider weil die "Caption" dort ABSOLUT positioniert werden muss! position:relative; */ } /* Beschriftungs-Box innerhalb des Slider-Widgets: */ .mh-slider-widget.mh-slider-large .mh-slider-caption { /* Nur für ZWEI-SPALTIGE-Slider: */ /* Informationsbox RECHTS + AUF VOLLER HÖHE platzieren: position:absolute; right:0px !important; top: 0px !important; */ /* --> bewirkt, dass der Info-Kasten Kasten IMMER DIE VOLLE HÖHE hat! */ background: rgba(42, 42, 42, 0.72) !important; } /* Überschrift des im Slider angezeigten Artikels: */ .mh-slider-caption .mh-slider-title { font-size:16px; font-weight: 800 !important; text-shadow: 2px 2px #000000; } /* Auszug aus dem im Slider gezeigten Artikel: */ .mh-slider-caption .mh-slider-excerpt { /* Für SIDEBAR-Slider: Artikel-eignenen Text-Auszug AUSBLENDEN! Denn: Dies passt in der Sidebar leider nicht mehr hinein! Besser ist es dort NUR ÜBERSCHRIFTEN zu erlauben. Daher: */ display: none !important; } /* FOOTER-BEREICH: */ /* Die ÜBERSCHRIFT-STRICHE im Footer sollten - abweichend von den übrigen - ROT sein und die ÜBERSCHRIFTEN WEISS! */ .mh-footer-widget .mh-widget-title { padding-bottom: 5px; border-bottom: 2px solid #e64946; } .mh-footer-widget .mh-widget-title-inner, .mh-footer-widget .mh-widget-title-inner a { color: #fff; font-weight: bold !important; } /* Falls ich ein einem der 4 Footer-Bereiche das "HTML"-WIDGET einsetzen, um dort (im Footer) eine beliebige, eigene LINK-LISTE zu platzieren (z.B. Links zu meinen Social-Media-Accounts oder zu anderen Blogs oder Partner-Blogs) dann wären die Links EINGERÜCKT! ==> Folgende CSS-Regel VERHINDERT dies: */ .mh-footer-widget ul { margin-left:0 !important; } /* KONTAKT-BUTTON */ #mycontactbuttonimfooterbereich { color:red !important; } /* SOCIAL-MEDIA-ICONS von FONT-AWESOME stylen, wie ich sie gerne hätte: */ .fa-wordpress, .fa-facebook, .fa-twitter, .fa-google, .fa-linkedin, .fa-youtube, .fa-instagram, .fa-pinterest, .fa-snapchat-ghost, .fa-skype, .fa-dribbble, .fa-vimeo, .fa-tumblr, .fa-vine, .fa-stumbleupon, .fa-flickr, .fa-yahoo, .fa-soundcloud, .fa-reddit { padding: 10px !important; width: 20px !important; font-size: 20px !important; text-align: center !important; text-decoration: none !important; margin: 5px 2px !important; border-radius: 50% !important; } .fa-wordpress:hover, .fa-facebook:hover, .fa-twitter:hover, .fa-google:hover, .fa-linkedin:hover, .fa-youtube:hover, .fa-instagram:hover, .fa-pinterest:hover, .fa-snapchat-ghost:hover, .fa-skype:hover, .fa-dribbble:hover, .fa-vimeo:hover, .fa-tumblr:hover, .fa-vine:hover, .fa-stumbleupon:hover, .fa-flickr:hover, .fa-yahoo:hover, .fa-soundcloud:hover, .fa-reddit:hover { opacity: 0.9; color: red; /*padding: 10.5px !important; border: 2px solid #121212;*/ box-shadow: 1px 1px 2px #aaa, 0 0 15px #aaa, 0 0 5px #aaa; } .fa-wordpress { background: #00aadc; color: white; } .fa-google { background: #dd4b39; color: white; } .fa-facebook { background: #3B5998; color: white; } .fa-pinterest { background: #cb2027; color: white; } .fa-twitter { background: #55ACEE; color: white; } .fa-reddit { background: #ff5700; color: white; } .fa-instagram { background: #125688; color: white; } .fa-stumbleupon { background: #eb4924; color: white; } .fa-tumblr { background: #2c4762; color: white; } .fa-dribbble { background: #ea4c89; color: white; } .fa-yahoo { background: #430297; color: white; } .fa-linkedin { background: #007bb5; color: white; } .fa-youtube { background: #bb0000; color: white; } .fa-vimeo { background: #45bbff; color: white; } .fa-snapchat-ghost { background: #fffc00; color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } .fa-vine { background: #00b489; color: white; } .fa-flickr { background: #f40083; color: white; } .fa-skype { background: #00aff0; color: white; } .fa-soundcloud { background: #ff5500; color: white; } /* SONSTIGE MEDIA-QUERIES anpassen: */ @media screen and (max-width: 1280px) { /* Datum ausblenden: */ .mh-meta.mh-custom-posts-meta { display: none; } } @media screen and (max-width: 1080px) { /* Schrift der Vorschaubilder kleiner machen: */ .mh-custom-posts-header .mh-custom-posts-small-title, .mh-custom-posts-header .mh-custom-posts-small-title a { font-size: 15px; } } @media screen and (max-width: 960px) { /* Schrift der Vorschaubilder kleiner machen: */ .mh-custom-posts-header .mh-custom-posts-small-title, .mh-custom-posts-header .mh-custom-posts-small-title a { font-size: 13px; } } @media screen and (max-width: 767px) { /* Foto-Slider der Startseite AUSBLENDEN: */ .mh-widget.mh-home-2.mh-widget-col-2.mh_slider_hp { /* */ display: none !important; } /* SIDE-BAR AUSBLENDEN (würde sonst UNTEN erscheinen, was auf dem Handy VIEL ZU VIEL wäre) */ .mh-widget-col-1.mh-sidebar.mh-home-sidebar.mh-home-area-6{ display:none !important; } /* Da jetzt wieder Platz ist: Text wieder GRÖSSER machen! */ .mh-custom-posts-header .mh-custom-posts-small-title, .mh-custom-posts-header .mh-custom-posts-small-title a { font-size: 16px; } /* Thumbnails KLEINER machen: */ .mh-custom-posts-widget img { zoom: 80%; } /* Social Media Icons kleiner darstellen als im Web: */ .fa-wordpress, .fa-facebook, .fa-twitter, .fa-google, .fa-linkedin, .fa-youtube, .fa-instagram, .fa-pinterest, .fa-snapchat-ghost, .fa-skype, .fa-dribbble, .fa-vimeo, .fa-tumblr, .fa-vine, .fa-stumbleupon, .fa-flickr, .fa-yahoo, .fa-soundcloud, .fa-reddit { padding: 8px !important; width: 16px !important; font-size: 16px !important; text-align: center !important; text-decoration: none !important; margin: 5px 2px !important; border-radius: 50% !important; } }