Responsive Layout ist nicht genau in der Position, die ich will

Question

Ich habe versucht, eine responsive Layout vor einer Woche verlassen, die sehr ähnlich zu einer Website ist, die ich gefunden habe, aber ich kann es überhaupt nicht tun. Ich sende die Bilder der reaktionsschnellen Seite, die ich gesehen habe, und ich sende das Bild, wie es mir gehört.

Die Seite, die ich ähnlich tun möchte, ist dies:

http://mapa.buenosaires.gob.ar

Und die Seite, die ich das gleiche in git tun möchten, können Sie den Klon, herunterladen, Aktie machen, was Sie wollen:

https://github.com/eltonsantos/snippets_uteis/tree/master/sidebar_bootstrap

der normale Teil der Website, Vollbild und große ich in der Lage war genau das zu tun, was ich will, aber der ansprechenden Teils ist, ich bin nicht immer, alles, verzerrt gebrochen und an der falschen Stelle . Bitte, kann mir jemand helfen?

Auch wenn ich die Medien-Anfragen benutze ich es nicht genau verlassen kann, wie es auf der Website ist, und ich würde zumindest verstehen, warum. Kann mir jemand helfen?

Answer 1

CSS liest von oben nach unten, was bedeutet, dass Änderungen, die an einem Element in der mobilen Version vorgenommen wurden, einen neuen Stil erhalten, wenn die Desktop-CSS-Eigenschaft danach gelesen wird. Also, was Sie tun müssen, ist, css-Code zurückzusetzen.

Ein Beispiel

// This is mobile CSS 
.btn { 
    color: red; 
} 

@media screen and (max-width: 500px) { 
    // this is desktop CSS 
    .btn { 
     color: blue; 
    } 
} 

Wenn wir uns die Desktop-CSS ohne Farbe btn zu verlassen, würde es automatisch die Farbe Rot hat. Aber jetzt überschreiben wir es.