Mobile Ansicht Peer CSS anpassen

Gelöst urlaubsreise
(@urlaubsreise)

vor 2 Jahren, 9 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)

pezi
(@pezi)

vor 2 Jahren, 9 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 2 Jahren, 9 Monaten
```
.featured-content {
  width: 100%;
}
@media all and (min-width:993px) {
  .home .featured-content {
    width:66%;
  }
}
```
Thread-Starter urlaubsreise
(@urlaubsreise)

vor 2 Jahren, 9 Monaten

@pixolin Funktioniert leider nicht

Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 9 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 2 Jahren, 9 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 2 Jahren, 9 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 2 Jahren, 9 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 2 Jahren, 9 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 2 Jahren, 9 Monaten

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

pezi
(@pezi)

vor 2 Jahren, 9 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 2 Jahren, 9 Monaten

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

pezi
(@pezi)

vor 2 Jahren, 9 Monaten

Das schaut toll aus! Gell?

Thread-Starter urlaubsreise
(@urlaubsreise)

vor 2 Jahren, 9 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.

Themen-Schlagwörter

Ansichten