モバイルで文字列が正しく表示されませんか？

Question

私は愚かな間違いをした場合私はここで新しいので、私を許してください。私はこのウェブサイト（http://www.fountfornations.org/）を編集しようとしていますが、それは私がデスクトップ上でそれを望む方法に見えますが、私は携帯電話を見ると「制限なしのエンパワーメント」という行が画面の上部と画面外に表示されます。この問題をどのように修正すればよいですか？私はメディアクエリを使用して、画面サイズが< 600pxの場合は文字列を下に移動しようとしましたが、文字列の位置に違いはありません。ここに私のコードは次のとおりです。

HTML：事前に

CSS: 
 

 
    .motto{ 
 
\t text-align: center; 
 
\t padding-left: 60px; 
 
\t position: relative; 
 
\t right: 155px; 
 
\t 
 
    } 
 
    @media screen and (max-width: 600px) { 
 
    ... 
 
    #words{ 
 
\t text-align: left; 
 
    } 
 
    .motto{ 
 
\t position: relative; 
 
\t top: 250px; 
 
    }

<div class="motto"> 
 
    <h1>EMPOWERMENT <span style="color: #ffcc00;">WITHOUT LIMITATION</span></h1> 
 
    </div>

ありがとう！

Answer 1

メディアクエリでtopの値を指定しているため、テキストが先頭にジャンプしています。これを単に削除して、それがページ上のどこに垂直であるかを維持してください。

コンテンツをデフォルトで並べ替える場合はright、メディアクエリで一致させる場合はleftを使用しています。スナップポイントに達すると、.mottoにはの両方の属性が適用されます（属性が適用されます）。

あなたは本当にあなたがすでに.mottoにpadding-leftを使用しているとして、position: relativeとleftまたはrightのいずれかを使用する必要はありません。私はmargin-leftの代わりに、padding-left（ちょうど<h1>ない、全体.motto移動しているので、目的のインデントに到達するためにスナップポイントでこれを変更するを使用してお勧めします：

.motto { 
 
    text-align: center; 
 
    margin-left: 60px; 
 
    position: relative; 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    .motto { 
 
    margin-left: 80px; 
 
    } 
 
}

<div class="motto"> 
 
    <h1>EMPOWERMENT 
 
    <span style="color: #ffcc00;">WITHOUT LIMITATION</span> 
 
    </h1> 
 
</div>

@mediaクエリでposition: relativeを再宣言する必要はありません。メディアクエリ内の要素はメディアクエリ以外の規則を自動的に継承するため、要素にはすでにposition: relativeが適用されています。

これが役に立ちます。 :)