Bootstrap reagiert - funktioniert nicht

-1

Ich habe eine sehr einfache Zielseite mit Bootstrap erstellt. Während ich es entwarf, arbeitete ich an den reaktionsfreudigen Breakpoints und in Chrome sahen sie alle toll aus.Bootstrap reagiert - funktioniert nicht

Jetzt, wo ich meine Website hochgeladen habe, habe ich festgestellt, dass das Responsive nicht funktioniert. Im Desktop habe ich keine Probleme, aber im mobilen Bereich bleiben die Text- und Schaltflächengrößen gleich.

www.woodtechms.com

Vielen Dank für Ihre Hilfe!

Quelle

2017-05-08 Mourad

Haben Sie diese Dateien auf den Server hochgeladen? 'css/bootstrap.css',' css/bootstrap.min.css' und 'css/custom-landing.css'. Falls nicht, können Sie das CDN des Bootstrap verwenden. Sehen Sie sich http://getbootstrap.com/getting-started/#download-cdn für weitere Informationen an. –

Hallo. Ja, ich habe alle drei Dateien auf den Server hochgeladen. Irgendwelche anderen Toughts? – Mourad

Setzen Sie den Code in die Frage selbst – ZimSystem

Ich bin ziemlich sicher, dass es wegen fehlender Meta-Tags innerhalb header ist.

Here's Bootstrap template

Außerdem habe ich img-responsive Klasse zu Ihrem Logo-Bild und dann das Logo skaliert nach unten wie es sollte.

Quelle

2017-05-08 19:18:24 kwiat1990

Danke, das half, aber ich fand auch den anderen Fehler, den ich hatte. – Mourad

Ich habe diese Zeilen zu meinem CSS hinzugefügt: – Mourad

Es funktioniert aber nur für eine Bildschirmgröße von mehr als 768 und weniger als 900px wie in Ihrem benutzerdefinierten CSS geschrieben:

@media screen and (min-width: 768px) and (max-width: 900px) { 

    /* ---- Logo Woodtech ---- */ 
    .logo { 
     margin-top: 230px; 
    } 

    /* ---- Title ---- */ 
    h2 { 
     font-size: 5.9rem; 
     margin-top: 130px; 
     margin-bottom: 60px; 
     line-height: 70px; 
    } 

    /* ---- Text ---- */ 
    p { 
     font-size: 34px; 
     padding-bottom: 34px; 
    } 

    /* ---- Button ---- */ 
    .contact-button { 
     width: 400px; 
     font-size: 4rem; 
     height: 100px; 
    } 
}

Wenn Sie es wünschen für andere Breiten Arten zu ändern, dann müssen Sie mehr hinzufügen Media-Abfragen wie die in Ihrem CSS hinzugefügt.

Für Beispiel, wenn Sie auf die Schaltfläche Breite wollen 300px zwischen Bildschirmgröße 600px sein und 800px Sie folgende schreiben:

@media screen and (min-width: 600px) and (max-width: 800px){ 
    .contact-button{ 
    width:300px; 
} 
}

Und ebenso können Sie Stile für andere Elemente in verschiedenen Breiten hinzufügen.

Quelle

2017-05-08 19:30:42

Vielen Dank! Ich habe ein sehr seltsames Problem (ein anderes) mit dem Hintergrundbild. Ich hatte es im Tag eingestellt. Dann habe ich gelesen, dass es im Tag sein sollte. Wenn ich das Bild auf das Tag einstelle, wird das Bild erst angezeigt, nachdem der Body-Inhalt beendet wurde. (all das im Handy). Beim Einchecken in Chrome oder Firefox funktioniert es, aber wenn ich es in meinem Handy (Moto) überprüfe, tut es das nicht. Irgendwelche Gedanken? – Mourad

Überprüfen Sie diese Website: https: //www.html5rocks.com/en/tutorials/speed/img-compression/. –

Es kann aufgrund der Bildgröße sein, dass es Zeit braucht, um zu laden. Auch es hängt von der Geschwindigkeit des Internets ab. Sie können versuchen, Ihre Bilder so gut wie möglich zu komprimieren. Stellen Sie außerdem sicher, dass wenn Ihre Website in Produktion geht, Sie auch andere Assets wie html, css, js minimieren. Dies wird die Leistung Ihrer Website verbessern und Ihnen eine bessere Benutzererfahrung bieten. –

Bootstrap reagiert - funktioniert nicht

Antwort

Verwandte Themen