Support » Allgemeine Fragen » Mobile Ansicht Peer CSS anpassen

  • Gelöst urlaubsreise

    (@urlaubsreise)


    Hallo liebe Community,

    ich wollte die Sidebar auf http://www.urlaubsreise.blog nur auf der ersten Seite haben und habe dann die Textbreiten angepasst, da sonst alle anderen Seiten rechts einen freien Rand hatten, wo sonst die Sidebar war:

    .featured-content {
    width: 100%;
    }
    .home .featured-content {
    width: 66%;
    }
    Soweit so gut.

    Jetzt ist mir aber aufgefallen, dass bei der Ansicht auf dem Handy damit ein Problem auftritt. Da erscheint die Sidebar erst unter allen Beiträgen (was ja okay ist), aber rechts ist auf der Startseite wieder der freie Rand. Und die Überschriften der Beiträge werden damit auch abgeschnitten.

    Gibt es eine Möglichkeit die Startseite bei Desktop so zu lassen und ausschließlich bei der mobilen Version auf 100% Breite zu setzen?

    Vielen lieben Dank schon mal
    Tina

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

Ansicht von 13 Antworten - 1 bis 13 (von insgesamt 13)
  • Gibt es eine Möglichkeit die Startseite bei Desktop so zu lassen und ausschließlich bei der mobilen Version auf 100% Breite zu setzen?

    Ja, mit den schon erwähnten Media Querys.

    .featured-content {
      width: 100%;
    }
    @media all and (min-width:993px) {
      .home .featured-content {
        width:66%;
      }
    }
    Thread-Ersteller urlaubsreise

    (@urlaubsreise)

    @pixolin Funktioniert leider nicht

    „Funktioniert nicht“ ist ein schlechtes Feedback.
    Was hast du ausprobiert? Wie bist du vorgegangen?

    Ich sehe im Moment nicht, dass du die vorgeschlagene CSS-Regel eingetragen hast.
    Du verwendest ein Cache-Plugin. Cache geleert?

    Thread-Ersteller urlaubsreise

    (@urlaubsreise)

    Also ich habe den Code kopiert und bei zusätzliches CSS im Customizer eingetragen und gespeichert.
    Anschließend habe ich den Cache geleert.
    Auf dem Handy wird die Startseite immer noch mit der Lücke angezeigt, anstatt auf der vollen Breite.

    Dass die Kästchen der Beiträge untereinander statt nebeneinander erscheinen ist ja super, aber sie sollen eben über die ganze Breite gehen.

    LG
    Tina

    Auf der angezeigten Webseite taucht der CSS-Code trotzdem nicht auf.

    Kann es sein, dass du im Customizer die CSS-Regeln in einen Kommentar /* … */ gepackt hast?

    Deaktivier sonst bitte mal das Cache-Plugin, damit ich mir anschauen kann, wie der CSS-Code eingetragen ist.

    Thread-Ersteller urlaubsreise

    (@urlaubsreise)

    Habe den Fehler gefunden.

    Ich musste nur den ursprünglichen CSS Code für das Entfernen der Sidebar rausnehmen, nun funktioniert es. Daran habe ich gar nicht gedacht.

    Vielen lieben Dank

    Hm, wird bei mir noch nicht richtig angezeigt.

    Änder das mal in

    @media (max-width:992px) {
     .featured-content,
     .featured-sidebar {
      width:100% !important;
      margin:0
     }
     .site-info {
      width:100%;
      text-align:center
     }
    }

    (also mit einem etwas unschönen !important für die Breite).

    Thread-Ersteller urlaubsreise

    (@urlaubsreise)

    Das letzte geht nicht, da sonst auf dem Desktop bei den einzelnen Beiträgen die Breite nicht 100% ist.

    Lösche mal alle Cache. Ich sehe > 5 Versionen nur von .featured-content, welche definitiv aus einem Cache kommen

    Thread-Ersteller urlaubsreise

    (@urlaubsreise)

    Habe gerade nochmal rumprobiert. Jetzt Cache gelöscht und es
    müsste alles passen.
    LG
    Tina

    Das schaut toll aus! Gell?

    Thread-Ersteller urlaubsreise

    (@urlaubsreise)

    @pezi finde ich auch ☺️

Ansicht von 13 Antworten - 1 bis 13 (von insgesamt 13)