私のウェブサイトはモバイルデバイス上でこのように見えますか？

Question

現在15インチ（2880 x 1800）の表示サイズのMacBookを使用しています。私のウェブサイトの各セクションが私のホームページをどのように探しているかのスクリーンショットです。私はそれがモバイルデバイス上の応答だことを確認するために私h3テキストを修正することができますどのように

はQUESTION 1

。ここでは、それが画面上で正しく調整されていないことがわかるように、どのように見えるかのスクリーンショットを以下に示します。投稿の下にある私のサイトへのJSFIDDLEリンクを見ると、私は<div class="col-lg-12">を使って応答性があることを確認しています。それはなぜモバイルデバイス上でこれが起こっているのかわかりません。

<h1 class="maintxt bounceInUp animated">Hi, welcome to my portfolio</h1> 
<h2 class="maintxt bounceInUp animated">My name is Liam Docherty</h2> 
<h3 class="cd-headline bounceInUp animated loading-bar"> 
    <span>I'm a</span> 
    <span class="cd-words-wrapper"> 
    <b class="is-visible">Front-End Web Developer</b> 
    <b>Graphic Designer</b> 
    </span> 
</h3> 

ここに、私のウェブサイトの問題を示すモバイルデバイスビューのスクリーンショットがあります。あなたはブートストラップmedia querysを設定する必要があり

JSFIDDLE

Answer 1

。

@media (min-width: 375px) and (max-width: 414px) { 
.cssClass1{ 
    margin-left:5px !important; 
    } 
} 

したがって、幅が375〜414pxの各デバイスは、これらの特殊なCSSクラスを使用します。さまざまなデバイスの幅と高さは、Safariのレスポンシブデザインセクションで確認できます。 320pxはiPhone 5、375はiPhone 6などです。

JSFiddlefont sizeのデバイスが375px未満の場合は0.5emに変更しました。 !importantキーワードを使用したことに注意してください。キーワードを使用しないときにクラスが適用されないことがあるためです。自分で試してみてください。コメントを残さないと、そのトリックを行う必要があります:)