Twenty Eleven Theme - Mobile Version bearbeiten mittels Child Theme

DrMZxx

Hallo, ich möchte meine mobile Version von Twenty Eleven Theme ähnlich meiner normalen Theme innerhalb des Child Theme bearbeiten.

Ich möchte den Seiten-Titel und die Seite-Beschreibung nicht anzeigen lassen. Das habe ich wie folgt in meiner Child Theme für die normale Seite gemacht.

PHP

/* =Header
----------------------------------------------- */
#site-title {
    margin-right: 270px;
    padding: 0.65625em 0 0;
    display: none;
}
#site-description {
    color: #7a7a7a;
    font-size: 14px;
    margin: 0 270px 0.15625em 0;
    display: none;
}

Alles anzeigen

Also habe ich das analog auch für das Response / Mobile Theme ausprobiert aber ohne Erfolg.

PHP

/* =Responsive Structure
----------------------------------------------- */
/* Reposition the site title and description slightly */
    #site-title {
        padding: 5.30625em 0 0;
        display: none;
    }
    #site-title,
    #site-description {
        margin-right: 0;
        display: none;
}

Alles anzeigen

Leider bringt das keine Änderung. Aber woran liegt es?

Hier auch mal mein komplettes Child-Theme:

PHP

/*
Theme Name:     TwentyEleven_Child
Theme URI:      http://xxxxxxxx.de
Description:    Child theme for the Twenty Eleven theme 
Author:         DrMZxx
Author URI:     http://xxxxxxxx.de
Template:       twentyeleven
Version:        0.1.1
*/




@import url("../twentyeleven/style.css");




/* =Structure
----------------------------------------------- */


#page {
    margin: 1em auto;
    max-width: 1000px;
}




/* =Global
----------------------------------------------- */
body {
    background: #ffffff;
}




/* =Header
----------------------------------------------- */
#site-title {
    margin-right: 270px;
    padding: 0.65625em 0 0;
    display: none;
}
#site-description {
    color: #7a7a7a;
    font-size: 14px;
    margin: 0 270px 0.15625em 0;
    display: none;
}


/* Search Form */
#branding #searchform {
    display:none;
    position: absolute;
    top: 6.8em;
    right: 7.6%;
    text-align: right;
}




/* =Footer
----------------------------------------------- */
/* Site Generator Line */
#site-generator {
    background: #ffffff !important;
    border-top: 1px solid #ddd;
    color: #666;
    font-size: 12px;
    line-height: 2.2em;
    padding: 2.2em 0.5em;
    text-align: center;
}




/* =Responsive Structure
----------------------------------------------- */
/* Reposition the site title and description slightly */
    #site-title {
        padding: 5.30625em 0 0;
        display: none;
    }
    #site-title,
    #site-description {
        margin-right: 0;
        display: none;
}




/* Intro */
article.intro {
    background: #ffffff;
    border-bottom: none;
    margin: -1.855em -8.9% 1.625em;
    padding: 0 8.9%;




/* Child-Footer */

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

DrMZxx

Keiner eine Idee woran es liegt oder wie ich das bearbeiten kann?

alchymyth

du musst die Media query mit einbauen;

wie im original Twenty Eeven:

Code

/* =Responsive Structure
----------------------------------------------- */
@media (max-width: 800px) {
 /* Simplify the basic layout */


   /*hier deine styles fuer mobile*/


}

DrMZxx

Danke für die Antwort.
Hab ich gemacht, aber leider ändert es dennoch nichts. Noch immer wird mir der Titel und die Beschreibung beid er mobilen Seite angezeigt.

(Auszug aus der Child mit den Eintragungen zur Response)

Code

/* =Responsive Structure
----------------------------------------------- */
@media (max-width: 800px) {
    /* Simplify the basic layout */
/* Reposition the site title and description slightly */
    #site-title {
        padding: 5.30625em 0 0;
        display: none;
    }
    #site-title,
    #site-description {
        margin-right: 0;
        display: none;
}

Alles anzeigen

Zum besseren Verständnis hier der gesamte Response Bereich aus der Originalen style.css. Vielleicht hilft das weiter.

CSS

/* =Responsive Structure
----------------------------------------------- */


@media (max-width: 800px) {
    /* Simplify the basic layout */
    #main #content {
        margin: 0 7.6%;
        width: auto;
    }
    #nav-below {
        border-bottom: 1px solid #ddd;
        margin-bottom: 1.625em;
    }
    #main #secondary {
        float: none;
        margin: 0 7.6%;
        width: auto;
    }
    /* Simplify the showcase template */
    .page-template-showcase-php .featured-posts {
        min-height: 280px;
    }
    .featured-posts section.featured-post {
        height: auto;
    }
    .page-template-showcase-php section.recent-posts {
        float: none;
        margin: 0;
        width: 100%;
    }
    .page-template-showcase-php #main .widget-area {
        float: none;
        margin: 0;
        width: auto;
    }
    .page-template-showcase-php .other-recent-posts {
        border-bottom: 1px solid #ddd;
    }
    /* Simplify the showcase template when small feature */
    section.featured-post .attachment-small-feature,
    .one-column section.featured-post .attachment-small-feature {
        border: none;
        display: block;
        float: left;
        height: auto;
        margin: 0.625em auto 1.025em;
        max-width: 30%;
        position: static;
    }
    article.feature-image.small {
        float: right;
        margin: 0 0 1.625em;
        width: 64%;
    }
    .one-column article.feature-image.small .entry-summary {
        height: auto;
    }
    article.feature-image.small .entry-summary p a {
        left: 0;
        padding-left: 20px;
        padding-right: 20px;
        width: auto;
    }
    /* Remove the margin on singular articles */
    .singular .entry-header,
    .singular .entry-content,
    .singular footer.entry-meta,
    .singular #comments-title {
        width: 100%;
    }
    /* Simplify the pullquotes and pull styles */
    .singular blockquote.pull {
        margin: 0 0 1.625em;
    }
    .singular .pull.alignleft {
        margin: 0 1.625em 0 0;
    }
    .singular .pull.alignright {
        margin: 0 0 0 1.625em;
    }
    .singular .entry-meta .edit-link a {
        left: 0;
        position: absolute;
        top: 40px;
    }
    .singular #author-info {
        margin: 2.2em -8.8% 0;
        padding: 20px 8.8%;
    }
    /* Make sure we have room for our comment avatars */
    .commentlist {
        width: 100%;
    }
    .commentlist > li.comment,
    .commentlist .pingback {
        margin-left: 102px;
        width: auto;
    }
    /* And a full-width comment form */
    #respond {
        width: auto;
    }
    /* No need to float footer widgets at this size */
    #colophon #supplementary .widget-area {
        float: none;
        margin-right: 0;
        width: auto;
    }
    /* No need to float 404 widgets at this size */
    .error404 #main .widget {
        float: none;
        margin-right: 0;
        width: auto;
    }


}
@media (max-width: 650px) {
    /* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
    body, input, textarea {
        font-size: 13px;
    }
    #site-title a {
        font-size: 24px;
    }
    #site-description {
        font-size: 12px;
    }
    #access ul {
        font-size: 12px;
    }
    article.intro .entry-content {
        font-size: 12px;
    }
    .entry-title {
        font-size: 21px;
    }
    .featured-post .entry-title {
        font-size: 14px;
    }
    .singular .entry-title {
        font-size: 28px;
    }
    .entry-meta {
        font-size: 12px;
    }
    blockquote {
        margin: 0;
    }
    blockquote.pull {
        font-size: 17px;
    }
    /* Reposition the site title and description slightly */
    #site-title {
        padding: 5.30625em 0 0;
    }
    #site-title,
    #site-description {
        margin-right: 0;
    }
    /* Make sure the logo and search form don't collide */
    #branding #searchform {
        top: 1.625em !important;
    }
    /* Floated content doesn't work well at this size */
    .alignleft,
    .alignright {
        display: block;
        float: none;
        margin-left: 0;
        margin-right: 0;
    }
    /* Make sure the post-post navigation doesn't collide with anything */
    #nav-single {
        display: block;
        position: static;
    }
    .singular .hentry {
        padding: 1.625em 0 0;
    }
    .singular.page .hentry {
        padding: 1.625em 0 0;
    }
    /* Talking avatars take up too much room at this size */
    .commentlist > li.comment,
    .commentlist > li.pingback {
        margin-left: 0 !important;
    }
    .commentlist .avatar {
        background: transparent;
        display: block;
        padding: 0;
        position: static;
    }
    .commentlist .children .avatar {
        background: none;
        left: 2.2em;
        padding: 0;
        position: absolute;
        top: 2.2em;
    }
    /* Use the available space in the smaller comment form */
    #respond input[type="text"] {
        width: 95%;
    }
    #respond .comment-form-author .required,
    #respond .comment-form-email .required {
        left: 95%;
    }
    #content .gallery-columns-3 .gallery-item {
        width: 31%;
        padding-right: 2%;
    }
    #content .gallery-columns-3 .gallery-item img {
        width: 100%;
        height: auto;
    }


}
@media (max-width: 450px) {
    #content .gallery-columns-2 .gallery-item {
        width: 45%;
        padding-right: 4%;
    }
    #content .gallery-columns-2 .gallery-item img {
        width: 100%;
        height: auto;
    }


}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    body {
        padding: 0;
    }
    #page {
        margin-top: 0;
    }
    #branding {
        border-top: none;
    }


}

Alles anzeigen

alchymyth

link zum problem?

hast du den browser-cache geleert? zB mit 'STRG F5' oder (mehrfachem) neu-laden der webseite?

DrMZxx

Zitat von alchymyth

link zum problem?
hast du den browser-cache geleert? zB mit 'STRG F5' oder (mehrfachem) neu-laden der webseite?

Habe den Cache bei meinem Smartphone geleert und die Seite mittlerweile mehrfach neu aufgerufen.

meine Seite:
cinemafoyer.de

Wenn man sich die Browserseite anschaut ist der Text über dem Headerbild nicht mehr vorhanden, da ich ihn bereits erfolgreich ausgeblendet habe. Aber wenn ich diese Seite über mein Smartphone öffne, zeigt er mir die integrierte Mobile-Seite an und dann immer mit dem Text über dem Headerbild.

Pero

Ich habe mir mal deine Seite am PC und auf dem Smartphone angeschaut.

Nun verstehe ich was du meinst:
Es wird wie es scheint nicht alles via CSS geregelt, denn wenn ich mit dem Smartphone auf die Seite gehe wird auch ein ganz anderes Menülayout usw. geladen + der Text über dem Header-image wird angezeigt.

Gibt man sein Smartphone nun als Desktop-PC aus, so erscheint das schwarze Menü und der Text über dem Header-Image ist nicht mehr da.

Sprich: irgendeine User-Agent Anfrage scheint da noch mitzuspielen.

Du willst den Site-Title ja ausblenden...warum legst du in deinem Childtheme nicht eine header.php an mit dem selben Inhalt wie in dem Main-Theme und löscht die Zeile in dem der Blog-Title geladen wird?

EDIT://

Das sind die verantwortlichen Zeilen:

PHP

<hgroup>
        <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
                <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

DrMZxx

Zitat von Pero

Du willst den Site-Title ja ausblenden...warum legst du in deinem Childtheme nicht eine header.php an mit dem selben Inhalt wie in dem Main-Theme und löscht die Zeile in dem der Blog-Title geladen wird?

EDIT://
Das sind die verantwortlichen Zeilen:
...

Das habe ich auch schon probiert, aber das bezieht sich ebenfalls nur auf die Browserseite, nicht auf die mobile. Und für die Browserseite hab ich ja den Headertext mittels meiner style_child ausgeblendet.

Pero

So, da mich die Sache nicht in ruhe gelassen hat , habe ich deine Seite nochmal gründlich untersucht und bin fündig geworden!

es liegt an einem Plugin ;)

schau mal in folgende Datei:
wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/style.css
Version 3.4.2 (falls es mehrere gibt)

und suche da nach:

PHP

#branding hgroup {
    margin-bottom: 1.3em;
}

lösche das margin und setze ein display:none;

Damit sollte es gelöst sein ;)

DrMZxx

Zitat von Pero
So, da mich die Sache nicht in ruhe gelassen hat , habe ich deine Seite nochmal gründlich untersucht und bin fündig geworden!
es liegt an einem Plugin ;)
schau mal in folgende Datei:
wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/style.css
Version 3.4.2 (falls es mehrere gibt)
und suche da nach:
PHP
#branding hgroup {
    margin-bottom: 1.3em;
}
lösche das margin und setze ein display:none;
Damit sollte es gelöst sein ;)
Alles anzeigen

JA, damit hat es funktioniert. Absolut genial und vielen lieben Dank für deine Hilfe.

P.S. Kann man dafür auch eine Art child anlegen so das diese Änderung auch bestehen bleibt wenn das Theme ein Update bekommt?

Pero

Bitte ;)

Puh, da bin ich überfragt. Ich wusste gar nicht, dass Jetpack sowas mitliefert.
Notfalls musst das leider bei einem Update des Plugins manuell wieder ändern.

passerum

Hallo,

vielleicht wäre es auch eine Idee, die mobile Version komplett auszuschalten? Ich fand die Ansicht auf dem iPhone/iPad ziemlich bescheiden.
Dafür muss man in der header.php diese Zeile:
meta name="viewport" content="width=device-width
löschen.
Das geht wie gewohnt in der header.php des Childtheme

Gruß passerum

Pero

In der Regel ist

Zitat

[COLOR=#333333]meta name="viewport" content="width=device-width[/COLOR]

für CSS zuständig, sollte also drin gelassen werden.

Man müsste in den Plugineinstellungen einfach minileven ausschalten.

Das Plugin arbeitet nämlich mit User-Agents und nicht mit meta-Angaben.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Twenty Eleven Theme - Mobile Version bearbeiten mittels Child Theme

Jetzt mitmachen!