Wie kann ich die Größe des Helden ändern, wenn ich den Browser auf die Größe des iPhone verkleinere?

Question

Ich habe Held-Text, der nicht korrekt die Größe ändert, wie ich die Größe des Browsers verkleinern. Wie so unter:

habe ich versucht, den Vorschlag der SO hier posten: How can I make text wrap down to the next line, when a user reduces the size of the browser?

aber das ist nicht für mich arbeiten. Das ist mein style.css-Datei im Abschnitt über den Helden Abschnitt:

/* === HERO === */ 

#hero 
{ 
    background: url("/wp-content/themes/threegreenbirds-daniel/images/grass-ground-new.jpg") 50% 0 repeat fixed; 
    min-height: 500px; 
    padding: 40px 0; 
    color: white; 
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
} 

.col-sm-7 { 
    text-align: center; 
} 

.hero-text { 
    position: absolute; 
    top: 50%; 
    left: 20%; 
    margin-top: -150px; 
} 

und dies ist die Inhalt-Datei hero.php:

<!-- HERO 
========================================================================== --> 
<section id="hero" data-type="background" data-speed="5"> 
    <article> 
     <div class="container clearfix"> 
     <div class="row"> 
      <div class="col-sm-7 hero-text"> 
       <h1><?php bloginfo('name'); ?></h1> 
       <p class="lead"><?php bloginfo('description'); ?></p> 
      </div> 
     </div> 
     </div><!-- container --> 
    </article> 
</section><!-- hero --> 

ich mit einer Klasse von col-sm-7 versucht habe, und word-wrap: normal und ich habe versucht mit einer Klasse von .col-sm-7.hero-text {word-wrap: normal} und keiner hat für mich gearbeitet.

Ich versuche dies für Tablettengröße:

@media screen and (max-width: 991px) { 
    .hero-text { 
     left: 0; 
     right: 0; 
     margin: 0 auto; 
     text-align: center; 
     margin-top: 130px; 
     position: relative; 
     background: none; 
    } 
} 

und es funktioniert, aber für iphone Größe werden die Buchstaben noch trotz dieser abgeschnitten:

@media screen and (max-width: 568px) { 
    .hero-text { 
     left: 0; 
     right: 0; 
     margin: 0 auto; 
     text-align: center; 
     margin-top: 130px; 
     position: relative; 
     background: none; 
     } 
} 

Ist es, dass 568px nicht ist die richtige Größe? Warum funktioniert die Smartphone-Größe nicht?

Ich habe dann beschlossen unten pro Vorschlag .hero-Text im Layout Fluss zu halten und ich entwickeln diese:

#hero 
{ 
    background: url("/wp-content/themes/threegreenbirds-daniel/images/grass-ground-new.jpg") 50% 0 repeat fixed; 
    min-height: 500px; 
    padding: 40px 0; 
    color: white; 
    position: relative; 
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
} 

.container-clearfix { 
    position: relative; 
} 

.col-sm-7 { 
    text-align: center; 
} 

.hero-text { 
    top: 50%; 
    left: 20%; 
    margin-top: 90px; 
} 

/* === MEDIA QUERIES === */ 

@media screen and (max-width: 991px) { 
    .hero-text { 
     left: 0; 
     right: 0; 
     margin: 0 auto; 
     text-align: center; 
     margin-top: 130px; 
     margin-left: 100px; 
     position: relative; 
     background: none; 
    } 
} 

@media screen and (max-width: 600px) { 
    .logged-in .navbar-fixed-top { 
     top: 42px; 
    } 
    .hero-text { 
     left: 0; 
     right: 0; 
     margin: 0 auto; 
     text-align: center; 
     margin-top: 130px; 
     margin-left: 100px; 
     position: relative; 
     background: none; 
    } 
} 

@media screen and (max-width: 568px) { 
    .hero-text { 
     left: 0; 
     right: 0; 
     margin: 0 auto; 
     text-align: center; 
     margin-top: 130px; 
     position: relative; 
     background: none; 
     } 
} 

aber, was ich oben nicht gearbeitet habe, als ich die Bildschirmgröße unter 991px reduzieren. Bitte helfen Sie.

Answer 1

ich die Vorteile der Verwendung ems gelernt (oder rem) zu wollen, wenn die .hero-Text selbst auf dem Bildschirm auf die Größe, um die Größe oder anpassen .Hier ist ein Beispiel dafür, was ich meine:

/* === MEDIA QUERIES === */ 

@media screen and (max-width: 991px) { 
    .hero-text { 
     left: 0; 
     right: 0; 
     margin: 0 auto; 
     text-align: center; 
     font-size: 90%; 
     margin-top: 130px; 
     margin-left: 100px; 
     position: relative; 
     background: none; 
    } 
} 
@media screen and (max-width: 728px) { 
    .hero-text { 
     font-size: 75%; 
    } 
} 

@media screen and (max-width: 648px) { 
    .logged-in .navbar-fixed-top { 
     top: 42px; 
    } 
    .hero-text { 
     left: 0; 
     right: 0; 
     margin: 0 auto; 
     text-align: center; 
     font-size: 75%; 
     margin-top: 130px; 
     margin-left: 100px; 
     position: relative; 
     background: none; 
    } 
} 

@media screen and (max-width: 568px) { 
    .hero-text { 
     left: 0; 
     right: 0; 
     margin: 0 auto; 
     text-align: center; 
     font-size: 50%; 
     margin-top: 130px; 
     background: none; 
     } 
} 

Durch die Wahl font-size: 90% und Wiederholen dieser für andere Darstellungsgrößen und Anpassung geeignete Weise konnte ich den Text bekommen, um sich die Größe, wenn die Anzeigengröße zu ändern.

Answer 2

Es ist, weil Sie .hero-text aus dem normalen Layout-Flow mit position:absolute genommen haben.

Nicht ganz sicher, wie Ihr Text sollte am Ende aussehen, aber Sie haben die Wahl zwischen 2:

1. hinzufügen position: relative entweder #hero oder .container. Dadurch wird die absolut positionierte Ebene relativ zu diesen Ebenen positioniert. Im Moment würde ich annehmen, dass es in Bezug auf die body positioniert ist, da Sie nicht position: relative auf alle Eltern von .hero-text

oder

haben Sie
1. nehmen nicht .hero-text aus Layout fließen und versuchen, den Stil, den Sie ohne es mit position: absolute erhalten möchten