Ein CSS-Element im Responsive Design kann nicht überschrieben werden

Question

Dies ist die problematic Link. Ich habe ein Element namensin CSS. Es ist eine Inline-Box mit einer Breite von 100%. Auf der Homepage passt sie ihre Breite perfekt an ihre Eltern an und reagiert perfekt darauf, aber wenn ich in den Post eintrete, ändert sich ihre Breite je nach Inhalt. Hier sind einige screenshots

Und das ist die Post, wenn ich öffnen it-

Dies ist der Code für tbox

.tbox{ 
    display: inline-block; 
    width: 100%; 
    height: auto; 
    padding: 2px; 
    background-color: #FFFFFF; 
    border-radius: 25px; 

} 

Wenn ich die Breite auf 850px ändern, es funktioniert gut auf dem Desktop aber ich kann die Breite im Responsive Design nicht überschreiben. Es bleibt immer 850px.

Also wie man es reaktionsfähig macht, wenn die Breite 850px ist? Oder gibt es eine andere Lösung?

Answer 1

Das Problem ist nicht mit tbox suchen Sie den Code für .item .post.hentry und ändern width: 850px; zu max-width: 850px;

.item .post.hentry { 
    max-width: 850px; 
} 

Answer 2

können Sie Medienabfrage für reagieren, wie wie und dieser Code muss Haupt css unten als wie erste Haupt css

.tbox{ 
display: inline-block; 
width: 90%; // change it as you want 
height: auto; 
padding: 2px; 
background-color: #FFFFFF; 
border-radius: 25px; 
} 

dann schreiben über Code unten

@media (max-width:780px) { 
.tbox{ 
display: inline-block; 
width: 100%; // change it as you want 
height: auto; 
    padding: 2px; 
    background-color: #FFFFFF; 
    border-radius: 25px; 
    } 
    } 

Answer 3

Sie müssen verwenden schreiben hinzufügen box-sizing Eigenschaft in .tbox Klasse -

.tbox { 
    display: inline-block; 
    width: 100%; 
    height: auto; 
    padding: 2px; 
    background-color: #FFFFFF; 
    border-radius: 25px; 
    box-sizing: border-box; // add this property in main css 
} 

Answer 4

versuchen, Medien-Anfragen wie diese zu schreiben, dann wird Ihr div

.tbox{ 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: auto; 
 
    padding: 2px; 
 
    background-color: #FFFFFF; 
 
    border-radius: 25px; 
 

 
} 
 

 
@media(max-width:767px) { 
 
.tbox{ 
 
    display: inline-block; 
 
    width: 90%; //change percentage here 
 
    height: auto; 
 
    padding: 2px; 
 
    background-color: #FFFFFF; 
 
    border-radius: 25px; 
 

 
    } 
 
} 
 

 
@media (max-width:1024px) and (min-width:768px) { 
 
.tbox{ 
 
    display: inline-block; 
 
    width: 100%; //change percentage here 
 
    height: auto; 
 
    padding: 2px; 
 
    background-color: #FFFFFF; 
 
    border-radius: 25px; 
 

 
    } 
 
} 
 

 
@media (max-width:414px) and (min-width:100px) { 
 
.tbox{ 
 
    display: inline-block; 
 
    width: 70%; //change percentage here 
 
    height: auto; 
 
    padding: 2px; 
 
    background-color: #FFFFFF; 
 
    border-radius: 25px; 
 

 
    } 
 
}