CSS Medien Abfragefunktionalität

Question

Ich habe ein wahrscheinlich sehr einfache Frage für jemanden zu lösen, der wirklich weiß, wie man ...

Von verfügbarem Code gemischt ich einige CSS, dass im Moment tut, was ich suche, aber nur in einer geschlossenen Umgebung. Wenn ich es in eine existierende Jekyll-Vorlage einfüge, produziert es nur Abfall.

Hier ist die funtionality (Container - im Moment px und em gemischt werden, egal)

.columnsContainer { 
    position: relative; 
    max-width: 700px; 
    margin: auto; 
} 

.leftColumn { 
    margin-bottom: 10px; 
    padding: 5px; 
} 

@media screen and (min-width: 47.5em) { 
    .leftColumn { margin-right: 21em; } 
    .rightColumn { position: absolute; 
    top: 0; 
    right: 0; 
    width: 20em; 
    padding: 10px; 
    } 
} 

.head-img { 
    width: 300px; 
    max-width: 95%; 
    background-color: $white; 
    padding: 0px; 
    display: block; 
    vertical-align:middle; 
    margin-left: auto; 
    margin-right: auto; 
} 

ich es in ein jekyll Thema mit der exisiting Medienabfrage, die zur Zeit aufnehmen möge ist:

$on-palm:   500px; 
$on-laptop:  650px; 


@mixin media-query($device) { 
    @media screen and (max-width: $device) { 
     @content; 
    } 
} 

Wie komme ich dazu, dass diese beiden zusammen funktionieren?

Answer 1

Gelöst: eine weitere Medienabfrage In den main.css:

@mixin media-query-two($device) { 
    @media screen and (min-width: $device) { 
     @content; 
    } 
} 

Nun gibt andere Fragen sind ...