2016-07-10 6 views
0

Ich habe ein Problem mit meiner Webseite, die auf Smartphones und Tablets gut aussieht. Auf Desktop-Bildschirmen erstreckt sich der Inhalt jedoch über die gesamte Seitenbreite. Ich benutze pure-css Rahmen. example linkCSS max Inhalt Breite in großen Bildschirmen (purecss)

Was ich will, dass die Gitter ausstrecken nicht über die ganze Seite, wenn es auf einer großen Desktop-Seite

In meinem css Ich habe für die Medien Bildschirm einige Haltepunkte angezeigt wird. Die ganze Seite ist wie dies

gewickelt
<div class="container"> 
    <div class="pure-g"> 
    <div class="pure-u-1 pure-u-lg-1-3"> ...... </div> 
    </div> 
</div> 

ich versucht habe, eine geringere Breite auf Großer mit der reinen-u-lg-1-3 zu machen, aber davon abgesehen, dass dies nicht funktioniert, ich zweifle, ob diese ist die Lösung.

Was ich will ist, dass mein Inhalt auf großen Medienbildschirmen über 800px in der Breite begrenzt ist. Wie kann ich den Inhalt meiner Seite auf max 600px gesetzt (wie eigentlich fast das jede Webseite tun)

+0

'@media (min-width: 800px) {...}' Alle Auflösungen über 800px werden die Stile anwenden Sie in diesem Haltepunkt zu erklären; Hier können Sie eine 'max-width'-Regel deklarieren, um Ihren Inhalt für einen bestimmten Selektor (oder eine bestimmte Klasse) auf eine bestimmte Breite zu beschränken. – UncaughtTypeError

Antwort

3

Mate,

den unten Sheet Versuchen Sie, und lassen Sie mich wissen, ob es oder nicht funktioniert.

/*Using media to set the style If screen is bigger than 800px*/ 
 
@media screen and (min-width: 800px) { 
 
    .container { 
 
    max-width: 600px;/*Limit max-width to 600px*/ 
 
    margin: 0 auto;/*Centering this container*/ 
 
    } 
 
}

+0

danke, funktioniert für :) – Richard