So verhindern Sie, dass Inhalt außerhalb seines Containers verschwindet

-2

Ich entwickle ein WordPress Responsives Theme für meinen Blog. Dies ist die Struktur des Themas. Der gesamte Inhalt geht in das div "post".So verhindern Sie, dass Inhalt außerhalb seines Containers verschwindet

Wie kann ich alle Elemente in div „post“ nehmen machen alle Breite von ihm Behälter ist. Elemente wie Bilder, Texte werden gut angezeigt, aber eingebetteter Code aus YouTube-Videos, Tweets und Facebook-Looks im mobilen Browser abgeschnitten. Der aktuelle CSS-Code ist:

.container{ 
 
\t display: flex; 
 
} 
 
.content-area{ 
 
\t margin: 10px; 
 
\t flex: 3; 
 
\t order: 1; 
 
\t border-radius: 3px; 
 
} 
 
.sidebar{ 
 
\t margin: 10px; 
 
\t flex: 1; 
 
\t order: 2; 
 
} 
 
.post{ 
 
\t background-color: #fbfbfb; 
 
\t padding: 10px; 
 
\t border-radius: 3px; 
 
} 
 
.post img{ 
 
    \t width: 100%; 
 
}

Quelle

2016-11-17 Vipin Yadav

Wenn das alles zum Thema ist, müssen Dinge getan werden. @ Media-Abfragen für die mobile Ansicht, zum Beispiel, wo Sie die gesamte Breite des Bildschirms für das Post-Element, anstatt mit Margen, Boxen und Sidebar. Also, was meinst du "sieht beschnitten" - Sie fügen die Elemente hinzu und stylen sie Breite 100% Breite, und das sollte es tun (nicht eine Höhe einstellen, nur eine Breite, die Höhe wird je nach Bedarf dehnen/schrumpfen). – junkfoodjunkie

Es ist nicht klar, was Sie fragen. YouTube-Einbettungen und Twitter- und Facebook-Widgets sind alles sehr unterschiedliche Dinge. Es hat möglicherweise nichts mit Ihrem Thema zu tun. – isherwood

Es klingt wie Sie Elemente sind das Einbetten, wenn Sie Facebook, Twitter und YouTube erwähnen. Wenn ja, könnte eine einfache Regel wie die folgenden Ihr Problem lösen:

iframe { max-width: 100%!important; }

Quelle

2016-11-17 14:14:42 MateBoy

Das Werfen 'wichtiger 'Stile bei einem unklaren Problem ist ein Rezept für eine frustrierende Wartungserfahrung. – isherwood

Danke. Wichtig war der Trick. –

Sie sollten einen Stil für jedes Element in Ihrem Block „post“ hinzufügen. Für Bilder finde ich es ok.

.post img{ 
 
    width: 100%; 
 
} 
 

 
.post iframe { 
 
    width: 100%; 
 
} 
 

 
.post .other { 
 
    width: 100%; 
 
}

Wenn Sie etwas Schöneres Sie brauchen, Medienanfragen zu verwenden, für die meisten wichtigen Geräte anzupassen.

Quelle

2016-11-17 14:20:59 brahimfes

So verhindern Sie, dass Inhalt außerhalb seines Containers verschwindet

Antwort

Verwandte Themen