小さなデバイスでコンテンツの特定のビューを作成するのに助けが必要です

Question

おはよう！

「ビューポート：320 x 568px」のモバイルデバイスで特定のビューまたは表示を達成する方法については、ガイドまたはプットスルーが必要です。 Here's the screen view of the UI Bug on the aforementioned viewport.

がコード要素を検査するために、私のブラウザ（Chromeブラウザ）を使用した、私はこのコードを見つけました：

<div class="col-sm-1" style="margin-top:30px;"> 

<span style="height: 200px; 
          border-right: 1px solid #ccc; 
          padding-bottom: 157px;"></span> 
<br> 
<p style=" padding-top: 171px; 
          margin-left: -6px;">OR</p> 
<br> 
<span style="height: 200px; 
          border-right: 1px solid #ccc; 
          padding-bottom: 157px;"></span> 

その後、私はいくつかは、私は、それゆえ、上記のコードの調整を微調整しましたこの思い付いた：

<div class="col-sm-1" style="margin-top:30px;"> 

<span style=" 
          height: 20px; 
          border-right: 2px solid #ccc; 
          padding-right: 100px; 
          " class=""></span> 
<br> 
<p style=" 
          margin-left: 91px; 
          ">OR</p> 
<span style=" 
          height: 20px; 
          border-right: 2px solid #ccc; 
          padding-right: 100px; 
         "></span> 

その後I achieved this result thereafter

私の挑戦はすべて、このウェブサイトのスタイルシートの "@media screen and（max-width：480px）"のビューポートに持っていくことです。問題はこの全体的な微調整がhtmlページで行われているので、そこで編集して私が思いついたもので更新すれば、それは他のビューポートに影響します。

私の良い友達、どのように私は他のビューポートを変更せずに、スタイルシート内の上記のビューポートで動作するように微調整を入れますか？

あなたの素晴らしい返信をお待ちしています。

おかげ

Answer 1

さてさて、これは解決のための私の頭蓋骨の大割れた後、私のソリューションです。

私は、HTMLページに移動し、このようにその内容については責任を負いコードまたはタグを編集：

<div class="col-sm-1 text-center"> 

    <span style="height: 20px; 
    border-right: 2px solid #ccc; 
    padding-bottom: 12px;"></span> 
    <p style=" padding-top: 15px; 
    margin-left: -6px;">OR</p> 
    <span style="height: 20px; 
    border-right: 2px solid #ccc; 
    padding-bottom: 12px;"></span> 
</div> 

そして、CSSファイル内に、私はちょうどパディングトップを追加しました：200pxの属性に@media（最小幅：768px）は、768px以下の小さな画面での歪みを避けるためのものです。 CSSファイルにはもちろんであるCOL-SM-1要素、と768pxだけパディング属性を追加し、である：だから、私のCSSファイルに、私はちょうど分幅を探しました

.col-sm-1 { 
    width: 8.333333333333332%; 
    padding-top: 200px; 
} 

そしてもうすぐ！これは私の挑戦を解決し、誰もが再び幸せです。