Verwenden Sie Medienabfrage, um div-Elemente vertikal zu sortieren, wenn die Seite kleiner wird

Question

Ich entwerfe eine Komponente für eine Website, die ein fester Inline-Block ist. Es sieht derzeit gut aus auf einem normal großen Bildschirm, aber wenn der Bildschirm kleiner wird, werden die Dinge merkwürdig. Ich habe versucht, eine Medienabfrage zu verwenden, um einige der CSS-Eigenschaften zu ändern, um alle divs vertikal in eine Linie zu bringen. Das scheint nicht zu funktionieren.

Außerdem gibt es einen zusätzlichen 10px auf der Unterseite dieses Blocks, die ich auf verschiedene Arten zu entfernen versucht habe und er verschwindet nicht, wenn ich nicht die Höhe fest 300px auf dem größeren äußeren div. Setze. Im Moment versuche ich, die Calc-Funktion zu benutzen, um sie zu entfernen, aber ohne Glück. Wenn jemand das Problem auch kennt, wäre es großartig.

Hier ist die aktuelle Medienabfrage:

@media (max-width: 500px){ 
    #orange-block-right, #orange-picture{ 
    float: left; 
    display: inline; 
    }} 

Hier ist der Link zu der jsfiddle, die mein Leiden demonstrieren. Wenn jemand mich wissen lassen könnte, was das Problem ist, würde ich sehr dankbar sein.

Answer 1

Zunächst einmal müssen Sie Ihren linken Rand und Breite in den Medien Abfrage zurück:

#orange-block-right { 
    width: 100%; 
    margin-left: 0; 
} 

Ähnliche für die anderen Elemente.

Abgesehen davon, löschen Sie diese Float- und Inline-Eigenschaften, definieren Sie alle diese Elemente als Blöcke und zentrieren Sie deren Inhalt.