2017-09-27 4 views
1

Ich muss eine Website in einem CMS namens Kwik (KwikCMS) erstellen.Problem mit Medien-Bildschirm

Jetzt habe ich bereits diese ganze Seite gemacht, aber ich muss ein paar Medienbildschirme für mehrere Displays hinzufügen. Ich habe diesen ganzen Code im F12 Inspektor getestet und es sollte alles reparieren, aber aus irgendeinem Grund braucht es nicht mein CSS.

Ich habe es mit und ohne! Schon wichtig versucht, aber ich habe keine Ahnung, wie das zu beheben ist.

Das ist mein CSS-Code ist:

@media screen and (max-width: 1440px){ 
 

 
.site-scope .header-container .site-header .headerBlauw { 
 
margin-left: -14.2% !important; 
 
width: 102.5% !important; 
 
} 
 

 

 
.col-sm-12.module-wrapper.cms-preset-dropdown-shown{ 
 
height: 202px; 
 
} 
 

 
.row.site-header.header-slider { 
 
padding: 0; 
 
margin-left: -22px; 
 
width: 1454px; 
 
} 
 

 
.site-scope .col-sm-12.module-datacontainer.module-align-left.module-container { 
 
padding: 0 !important; 
 
} 
 

 
.site-scope .header-container .site-header .headerBlauw { 
 
margin-left: -14.4% !important; 
 
width: 96.6% !important; 
 
} 
 

 
.site-scope .header-container .site-header .module-menu { 
 
margin-left: -24% !important; 
 
} 
 

 
.site-scope .col-sm-12.module-datacontainer.module-align-left.module-container { 
 
padding: 0 !important;
   
 
margin-top: -23px !important; 
 
} 
 

 
.row.monteurs.row-container.sortable { 
 
margin-left: -76px !important; 
 
} 
 

 
.row.blokken.row-container.sortable { 
 
margin-left: -190px !important; 
 
left: 69px !important; 
 
text-align: center !important; 
 
} 
 

 
}

+0

Ok, ich werde eine sehr wilde Vermutung machen. Sie verwenden maximale Breite. Es wird die css der Klassen ändern, wenn der Bildschirm 1440px und darunter ist. Aber wenn Sie möchten, dass es über 1440px angezeigt wird, verwenden Sie min-width .. und ich denke, das ist der Fall hier .. –

+0

Nach dem Kopieren-Einfügen des Codes in a CSS Validator Ich habe ein unbekanntes Symbol in Zeile 33 (siehe auch in Sublime): .site-scope .col-sm-12.module-datacontainer.module-align-left.module-container { padding: 0! wichtig ; margin-top: -23px! Wichtig; } – AntonZlatkov

+0

@AntonZlatkov Ein unbekanntes Symbol ?? woher? –

Antwort

0

.headerBlauw zweimal in Ihrem CSS enthalten ist, kann es nicht sein, arbeiten wie du willst. Klären Sie, welcher Teil Ihres Codes nicht funktioniert, wie Sie wollen und wie genau Sie diese CSS in Ihre Website einbeziehen

+0

Ich sehe, das Problem ist das ganze css, das mit dem Medienbildschirm angewendet werden muss, nichts davon funktioniert, es liest einfach nicht den Medienbildschirm aus irgendeinem Grund –

+0

@JornBarkhof, versuchen Sie etwas wie minimale Breite '@media Bildschirm hinzufügen und (min-width: 1200px) und (max-width: 1400px) '. Überprüfen Sie, ob es funktioniert oder nicht in diesem Bereich, wenn nicht - aktualisieren Sie Ihre Frage mit dem Link zu Ihrem Projekt – Den

0
> @media (max-width: 1440px){} 

try Ihre Medien in diesem Code zu ändern

+0

Funktioniert auch nicht –

+0

Kann ich Ihren HTML-Code sehen? Ich möchte sehen, wenn Sie diesen Code setzen Mikhail

+0

Ich kann den HTML-Code nicht sehen, es in kwikcms gemacht. Oder meinst du es auf der Website zu überprüfen? –