Brickyard: Mobile Ansicht für einzelne Seiten ausschalten?

  • actionc4m

    (@actionc4m)


    vor 8 Jahren

    Hallo,

    Vorweg, es handelt sich bei meinem Theme um das Brickyard Theme. Ich würde nun gerne einzelne Seiten von dem Umwandlung zur mobilen Ansicht ausschließen. Dazu müsste ich doch eine Art Exception für den folgenden Bereich einfügen, oder?

    
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>" /> 
  <meta name="viewport" content="width=device-width" />

    Im Grunde würde es mir schon reichen, wenn die Seiten Templates Full Width with Title alle in der Desktop Ansicht bleiben würden.

    Danke schon einmal für eure Ideen und Antworten.

    VG

Ansicht von 2 Antworten – 1 bis 2 (von insgesamt 2)
  • Moderator Bego Mario Garde

    (@pixolin)

    vor 8 Jahren

    Mit dem Meta-Tag für den Viewport wird lediglich festgelegt, dass die Webseite in den kleineren Bildschirm mobiler Endgeräte eingepasst werden soll.

    Wenn du dir die Webseiten in den Entwickler-Werkzeugen deines Browsers anschaust (Rechtsklick auf den Inhaltsbereich des Blogbeitrags > Element untersuchen) siehst du, dass für den Inhalt folgende CSS-Regel verwendet wird:

    #content {
    float: left;
    margin: 0;
    width: 656px;
}

    Der Blogbeitrag wird also nach links geschoben und erhält eine feste Breite von 656px. Schiebst du nun das Browserfenster zusammen, wird eine andere CSS-Regel angezeigt:

    @media screen and (max-width: 1012px) {
#wrapper #content {
    max-width: 100%;
    width: 100% !important;
}
}

    Bei Bildschirmen mit einer maximalen Breite von 1024px wird die Größe des Inhaltsbereich also auf 100% gesetzt (und dank dem hinzugefügten !important andere Regeln im Zweifelsfall überschrieben).

    Dies können wir natürlich für einzelne Seiten überschreiben und das Theme bietet sogar für eigene CSS-Regeln ein eigenes Eingabefeld an. Dieses Eingabefeld erreichst du über Design > Anpassen > Brickyard General Settings (dort ganz unten).

    Dabei nutzen wir den Umstand, dass WordPress für jede Seite dem <body>-Tag eine individuelle CSS-Klasse zuweist. Die findest du wieder über die Entwicklerwerkzeuge deines Browsers heraus: Rechtsklick in die Seite > Element untersuchen und dann in der linken Spalte mit dem HTML nach dem HTML-Tag <body> suchen. Als CSS-Klasse müsstest du dann etwas finden wie page-id-42. Mit dieser CSS-Klasse fügen wir nun unsere eigene Regel hinzu:

    @media screen and (max-width: 1012px) {
.page-id-42 #wrapper #content {
    max-width: none;
    width: 656px !important;
}
}

    Möchtest du das auf mehrere Seiten ausdehnen, könnte es so aussehen:

    @media screen and (max-width: 1012px) {
.page-id-42 #wrapper #content,
.page-id-53 #wrapper #content,
.page-id-62 #wrapper #content {
    max-width: none;
    width: 656px !important;
}
}

    Ob das sinnvoll ist und eine gute User Experience vermittelt, ist eine andere Frage, die du aber auch nicht gestellt hast. 😉

    • Diese Antwort wurde geändert vor 8 Jahren von Bego Mario Garde. Grund: fehlende Klammern ergänzt
    Thread-Starter actionc4m

    (@actionc4m)

    vor 8 Jahren

    Hi,

    erstmal vielen Dank für deine ausführliche Antwort. Die Page-id habe ich ausgelesen und deinen code mit der ergänzten id in das CSS-Feld unter General Settings eingefügt. Leider funktioniert es nicht.

    Hast du vielleicht eine Idee woran es liegen könnte bzw. noch eine Idee zur Umsetzung?

    VG

Ansicht von 2 Antworten – 1 bis 2 (von insgesamt 2)
  • Das Thema „Brickyard: Mobile Ansicht für einzelne Seiten ausschalten?“ ist für neue Antworten geschlossen.

Schlagwörter