レスポンスエラー

現在、リンク先ページを開発中です。私は、ブラウザのサイズを小さくすると、 "Welcome"という単語が左半分に残るのではなく、右半分に伸びていることに気付きました。 https://jsfiddle.net/8k6ry9ay/レスポンスエラー

.leftHalf { 
 
    background: url(images/bg-1.jpg); 
 
    width: 50%; 
 
    position: absolute; 
 
    left: 0px; 
 
    height: 100%; 
 
} 
 

 
.rightHalf { 
 
    background-image: url(images/test1.jpg); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    width: 50%; 
 
    position: absolute; 
 
    right: 0px; 
 
    height: 100%; 
 
} 
 

 
.header { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight: 700; 
 
    letter-spacing: .14em; 
 
    color: #333; 
 
    font-style: normal; 
 
    font-size: 120px; 
 
    text-transform: uppercase; 
 
} 
 

 
.header2 { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight: 700; 
 
    font-style: normal; 
 
    text-transform: none; 
 
    letter-spacing: 0em; 
 
    line-height: 1em; 
 
    color: #333; 
 
    padding-right: 30px; 
 
    padding-bottom: 50px; 
 
    padding-left: 50px; 
 
} 
 

 
.display { 
 
    display: inline-block; 
 
    font-size: 69px; 
 
}

<link rel="stylesheet" href="css/bootstrap.css"> 
 
<link rel="stylesheet" href="css/bootstrap-theme.css"> 
 
<link href='http://fonts.googleapis.com/css? 
 
    family=Open+Sans:300italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> 
 
</script> 
 
<script type="text/javascript" src="js/bootstrap.js"></script> 
 
<script src="js/bootstrap.min.js"></script> 
 

 
<body> 
 
    <div class="rightHalf"></div> 
 
    <div class="leftHalf"> 
 
    <h1></h1> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div class="leftHalf"> 
 
    <h1 class="header">&nbsp;welcome</h1> 
 
    <br> 
 
    <br> 
 
    <h1 class=" header2 text-align-center" style="display:inline-block; font-size:40px"> 
 
     Please choose from the selections below 
 
    </h1> 
 
    </div> 
 
</body>

感謝メイト：ここでは以下の私のコードです。 H1から

&nbsp;

を削除し、私の英語

出典

2017-06-25 Anonymous

をあなたのコードの一部が欠けているように、我々は助けることができるにJsfiddleファイルを作るようですあなたはもっと速くなります。 –

@PabloCesarCordovaMoralesどうすればいいですか？ –

https://jsfiddle.net/あなたのコードをそこに置き、テストするためのリンクを教えてください。 –

<h1 class="header">&nbsp;welcome</h1>

はご容赦下さい。

この単語を応答させたい場合は、media queryを使用して幅の異なるフォントサイズを変更します。たとえば：

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

    .header{ 
     font-size:20px !important; 
    } 
}

EDITED：

@media screen and (min-width: 1200px) and (max-width: 2500px){ 

} 

@media screen and (min-width: 992px) and (max-width:1199px){ 

} 

@media screen and (min-width: 768px) and (max-width: 991px){ 
//tablets 
} 

@media screen and (min-width: 300px) and (max-width: 767px){ 

//mobiles 
}

、時には他にも役立ちます。

@media screen and (min-width: 280px) and (max-width: 500px){ 

    }

出典

2017-06-25 21:22:38 Wordica

私を助けてくれてありがとう。私はそれを試してフィードバックを与えるだろう –

私はそれをやった。しかし、私はまだ問題があります。私は "WELCOME"のサイズを維持するために、 "LECRAE"のようにhttp://www.lecrae.com –

あなたはCSSのメディアクエリについて学び、すべての幅の正しいフォントサイズを設定する必要があります - 私は最も人気のあるaswerを編集しましたメディアクエリ。 – Wordica

答えて

関連する問題