Mobile Ansicht Peer CSS anpassen

  • Gelöst urlaubsreise

    (@urlaubsreise)


    vor 3 Jahren, 3 Monaten

    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)
  • Anonymous User 14429768

    (@anonymized-14429768)

    vor 3 Jahren, 3 Monaten

    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.

    Moderator Bego Mario Garde

    (@pixolin)

    vor 3 Jahren, 3 Monaten

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

    (@urlaubsreise)

    vor 3 Jahren, 3 Monaten

    @pixolin Funktioniert leider nicht

    Moderator Bego Mario Garde

    (@pixolin)

    vor 3 Jahren, 3 Monaten

    „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-Starter urlaubsreise

    (@urlaubsreise)

    vor 3 Jahren, 3 Monaten

    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

    Moderator Bego Mario Garde

    (@pixolin)

    vor 3 Jahren, 3 Monaten

    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-Starter urlaubsreise

    (@urlaubsreise)

    vor 3 Jahren, 3 Monaten

    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

    Moderator Bego Mario Garde

    (@pixolin)

    vor 3 Jahren, 3 Monaten

    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-Starter urlaubsreise

    (@urlaubsreise)

    vor 3 Jahren, 3 Monaten

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

    Anonymous User 14429768

    (@anonymized-14429768)

    vor 3 Jahren, 3 Monaten

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

    Thread-Starter urlaubsreise

    (@urlaubsreise)

    vor 3 Jahren, 3 Monaten

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

    Anonymous User 14429768

    (@anonymized-14429768)

    vor 3 Jahren, 3 Monaten

    Das schaut toll aus! Gell?

    Thread-Starter urlaubsreise

    (@urlaubsreise)

    vor 3 Jahren, 3 Monaten

    @pezi finde ich auch ☺️

Ansicht von 13 Antworten – 1 bis 13 (von insgesamt 13)
  • Das Thema „Mobile Ansicht Peer CSS anpassen“ ist für neue Antworten geschlossen.