CSS Declaration werden nicht angezeigt

M

mrvh42

Neues Mitglied
Guten Tag oder Nacht je nachdem wann du das liest.

Und zwar bin ich relativ neu in CSS und hab ein Problem mit der CSS das ab einer bestimmten Größe wie zb 360px nicht angesprochen werden und ich somit keine Änderung vornehmen kann.

CSS: 
@media screen and (max-width: 360px) {
    .themenkachel_btn_text11 {
        margin-top: 15px !important;
        width: 80% !important;
        font-size: 18px !important;
        font-weight: 700;
    }
}

@media screen and (min-width: 360px) {
    .themenkachel_btn_text11 {
        margin-top: 15px !important;
        width: 80% !important;
        font-size: 18px !important;
        font-weight: 700;
    }
}

@media screen and (min-width: 480px) {
    .themenkachel_btn_text11 {
        margin-top: 15px !important;
        width: 80% !important;
        font-size: 20px !important;
        font-weight: 700;
    }
}

@media screen and (min-width: 765px) {
    .themenkachel_btn_text11 {
        margin-top: 15px !important;
        width: 80% !important;
        font-size: 20px !important;
        font-weight: 700;
    }
}

@media screen and (min-width: 981px) {
    .themenkachel_btn_text11 {
        padding-top: 30px !important;
        padding-right: 40px !important;
        padding-bottom: 30px !important;
        padding-left: 40px !important;
    }
}

@media screen and (min-width: 1200px) {
    .themenkachel_btn_text11 {
        margin-top: 15px !important;
        padding-left: 50px !important;
        width: 80% !important;
    }
}

@media screen and (min-width: 1400px) {
    .themenkachel_btn_text11 {
        margin-top: 15px !important;
        padding-left: 50px !important;
    }
}

hier ist der code um den es sich handelt.
Im Inspector kann ich erst ab 981px was ändern

Ich bin für jede Hilfe Dankbar :)
 
Zuletzt bearbeitet von einem Moderator:
Ich glaube, du musst dein Problem nochmal etwas genauer beschreiben.

Was wird nicht angesprochen und was kannst du nicht ändern?
Was willst du bei 981px im Inspector ändern?

Warum verwendest du überall !important?
Das ist eindeutig nicht zu empfehlen, wenn es nicht zwingend notwendig ist.
 
Sorry ich versuch es nochmal.

also ich will bei verschiedenen aufösuen der website sei es handy,tablet oder desktop das sich die größe meiner angesprochen Themenkachel sich gleich verhält wenn man eine andere Auflösung hat

und bei 360px wird es einfach nicht Übernommen oder im Inspector angezgit um vorher mal zu schauen wie es sich verhält

wieso ist !important nicht zu empfehlen?

das hab ich drin weil da sonst margin,paddig etc durchgestrichen sind und somt keine Änderung passiert

VG
 
Wenn die in den Browsertools sonst durchgestrichen sind, ist eher zu empfehlen, den Selektor zu schärfen, den du priorisieren willst. Oder die anderen zu lockern. Siehe z.B. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity. Der Grund ist einfach: Wenn du das später in einem anderen Kontext versuchen würdest wieder zu überschreiben, würde !important dir das Leben evt. schwer machen.

Du hast übrigens das Problem, dass die Breite 360px in beide media-queries fällt, weil die Enden inklusiv sind. Besser wäre z.B. @media screen and (max-width: 359px). Tritt das Problem nur bei exakt 360px auf oder auch bei niedrigeren Breiten? Falls das Problem danach noch besteht, wäre es gut ein MWE (minimal working example) zu sehen, das das Problem kurz demonstriert. Z.B. indem du es auf codepen erstellst und hier den Link teilst. Dann könnten wir dir noch viel besser helfen ;)
 
Was hat diese Themenkachel denn überhaupt sonst für Styles?

Du überschreibst ja teilweise mehrmals in den Media Queries exakt die gleichen Styles.
Das ist, außer du möchtest explizit einen Style von einer anderen Stelle überschreiben, der sich ebenfalls auf die Themenkachel auswirkt, wenig sinnvoll, da bspw. ein identisches margin-top und width usw. bei min-width: 360px auch noch bei min-width: 480px gilt und somit redundant ist, vorausgesetzt es wird nicht von woanders überschrieben.
 
Zurück
Oben Unten