ヘッダー要素が小さな画面で整列していない

私はいくつかのウェブデザインスキルを練習していましたが、ここで問題があります。フルスクリーンの見出しは要素を出させませんがモール画面では逆です：ここに大画面でそれの写真：ヘッダー要素が小さな画面で整列していない

そして、ここでは、小さな画面からの画像です：

ここでは、コードは次のとおりです。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Responsive html practice site</title> 
    <link href="css/styles.css" rel="stylesheet"> 
</head> 
<body> 

    <div class="container"> 

     <div class="header"> 
       <div class="lgcontainer"> 
         <h1 class="ib">Sonora</h1><img class="ib" src="img/images/logo.jpg" /> 
       </div> 
      <div> 

      </div> 

     </div> 

    </div> 



</body> 
</html>

ここで

は、CSSです：

body 
{ 
    margin:0; 
    padding:0; 
} 

.lgcontainer 
{ 
    margin:0 0 0 3.5%; 
    width:20%; 
    float:left; 
    text-align:center; 
    height:inherit; 
} 

.lgcontainer h1 
{ 
    margin:0 0 10% 0; 
} 

.lgcontainer img 
{ 
    margin:5% 0 0 5%; 
} 

.header 
{ 
width:100%; 
background:linear-gradient(#393a3b, #000000); 
color:white; 
height:65px; 

    } 

.ib 
{ 
    display:inline-block; 
}

私はそれはあなたがleftに100%とtext-alignへ.lgcontainerwidthを設定する必要がフルスクリーンに

出典

2017-07-08 Anonymous

メイクH1表示インラインブロックや小さな画面用 –

メイクを試しCSSメディアクエリを与えるここでCSSコードです。 https://www.w3schools.com/css/css3_mediaqueries_ex.asp –

ibクラスはimgとh1の両方に適用されます –

であるのと同じ、それを持っている必要があります。

body 
{ 
    margin:0; 
    padding:0; 
} 

.lgcontainer 
{ 
    margin:0 0 0 3.5%; 
    width:100%; 
    float:left; 
    text-align:left; 
    height:inherit; 
} 

.lgcontainer h1 
{ 
    margin:0 0 10% 0; 
} 

.lgcontainer img 
{ 
    margin:1% 0 0 5%; 
} 

.header 
{ 
width:100%; 
background:linear-gradient(#393a3b, #000000); 
color:white; 
height:65px; 

    } 

.ib 
{ 
    display:inline-block; 
}

Codepen例：https://codepen.io/anon/pen/KqGKLx

出典

2017-07-08 09:19:11

ヘッダー要素が小さな画面で整列していない

答えて

関連する問題