Header teilweise ausblenden Tablet/Mobile

  • Gelöst agucci1

    (@agucci1)


    vor 1 Monat, 2 Wochen

    Hallo zusammen,

    Ich habe auf meiner Startseite einen Introtext im Header, welcher ausschließlich auf der Landing Page auftauchen soll. Ich habe dafür bereits Unterstützung aus dem Forum bekommen, allerdings funktioniert der Code wie ich jetzt gemerkt habe nur für Desktop und nicht für Tablet/Mobile.

    .paged #header.ct-header .ct-container [data-column=middle] .ct-header-text,
    .single #header.ct-header .ct-container [data-column=middle] .ct-header-text,
    .page #header.ct-header .ct-container [data-column=middle] .ct-header-text,
    .category #header.ct-header .ct-container [data-column=middle] .ct-header-text {
    display: none;
    }

    Könnte mir jemand einen Tipp geben wie ich das auch für die kleineren Bildschirme anwende?

    Liebe Grüße und vielen Dank!

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 6 Antworten – 1 bis 6 (von insgesamt 6)
  • Moderator Hans-Gerd Gerhards

    (@hage)

    vor 1 Monat, 2 Wochen

    Hallo,
    hmm, jetzt wollte ich mir gerade die Website ansehen, um das zu analysieren.
    Geht aber nicht wegen eines Passworts, das ich logischerweise nicht habe.
    Schade. 🤷‍♂️

    Viele Grüße
    Hans-Gerd

    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 1 Monat, 2 Wochen

    Du kannst höchstens das hier mit einer Media Query testen:

    @media (max-width:900px) {
.paged #header.ct-header .ct-container [data-column=middle] .ct-header-text,
.single #header.ct-header .ct-container [data-column=middle] .ct-header-text,
.page #header.ct-header .ct-container [data-column=middle] .ct-header-text,
.category #header.ct-header .ct-container [data-column=middle] .ct-header-text {
   display: none;
}
}

    Den Wert hinter max-width kann du ja noch nach Belieben ändern.

    Thread-Starter agucci1

    (@agucci1)

    vor 1 Monat, 2 Wochen

    Jetzt ist das Passwort raus.

    leider funktioniert das nicht mit der Media Query…

    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 1 Monat, 2 Wochen

    Du hast ja auch die o. g. Regel einmal mit und einmal ohne CSS-Regel unter Zusätzliches CSS gepackt.
    Die andere Regel musst du natürlich entfernen.

    Evtl. reicht es auch, wenn du die Regel wie folgt unter zusätzliches CSS packst:

    @media (max-width:1199px) {
 .ct-header-text {
   display: none;
}
}

    Sollte das nicht klappen, dann ändere in der bereits o. g. Regel den Wert wie folgt: max-width:1199px

    An dieser Stelle möchte ich aber noch darauf hinweisen, dass wir hier bei WordPress-Fragen helfen. CSS-Probleme gehören in der Regel nicht dazu, auch wenn wir je nach Zeit mal entsprechende Tipps geben.
    Eine gute Möglichkeit, sich mit CSS zu beschäftigen, findest du z. B. hier, hier oder hier. Hier noch ein Link zu einem Hilfe- und Austausch-Forum für (u. a.) CSS -> Forum.

    Thread-Starter agucci1

    (@agucci1)

    vor 1 Monat, 1 Woche

    Dankeschön!

    ich habe noch den teil des headers eintragen müssen, jetzt funktioniert es!

    @media (max-width: 1199px) {
    .paged #header.ct-header .ct-container [data-column] .ct-header-text,
    .single #header.ct-header .ct-container [data-column] .ct-header-text,
    .page #header.ct-header .ct-container [data-column] .ct-header-text,
    .category #header.ct-header .ct-container [data-column] .ct-header-text {
    display: none;
    }
    }

    das nächste mal bei css frage ich ins richtige Forum 🙂

    Liebe Grüße!

    • Diese Antwort wurde vor 1 Monat, 1 Woche von agucci1 geändert.
    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 1 Monat, 1 Woche

    super – freut uns. Danke für die Rückmeldung.

    Denkst du bitte beim nächsten Mal daran, das Thema dann auch als gelöst zu markieren, wenn das Thema für dich erledigt ist. Danke.
    Gelöst
    Die Option findest du rechts in der Sidebar. Das habe ich jetzt schon gemacht.

    Sonst schauen wir unnötigerweise immer wieder in ein bereits gelöstes Thema. 😉

Ansicht von 6 Antworten – 1 bis 6 (von insgesamt 6)