2017-09-04 4 views
0

基本的に質問はヘッダーにあります。画面のサイズを小さくすると、下の行が下に落ちますが、下の行と重なるようになります。小さな画面で見るとブートストラップの行が重なって表示される

私は本当に明白な何かがあるかどうかを知りたいだけです。 私にとってはうまくいく解決策を見つけることができないようです。

を参照してくださいスクリーンショットおよび以下のコード...

#section-headings { 
 
\t font-size: 44px; 
 
} 
 

 
h1 { 
 
\t text-align: center; 
 
\t color: #ffffff !important; 
 
} 
 

 
h2 { 
 
\t text-align: center; 
 
} 
 

 
#tag-line { 
 
\t color: #ffffff !important; 
 
} 
 

 
#main-header { 
 
\t margin: 0; 
 
} 
 

 
.jumbotron { 
 
\t background-image: url(../images/alaska-landscape.jpg); 
 
\t background-size: cover; 
 
\t height: 100vh; 
 
\t width: 100%; 
 
\t margin: 0; 
 
} 
 

 
#services { 
 
\t background-color: #fC99B0; 
 
\t height: 100vh; 
 
\t width: 100%; 
 
\t margin: 0; 
 
} 
 

 
#services-col { 
 
\t padding: 80px; 
 
} 
 

 
#general-text { 
 
\t text-align: justify; 
 
} 
 

 
#about { 
 
\t background-color: #8589FC; 
 
\t height: 100vh; 
 
\t width: 100%; 
 
\t margin: 0; 
 
} 
 

 
#previous-work { 
 
\t background-color: #28292D; 
 
\t height: 100vh; 
 
\t width: 100%; 
 
\t margin: 0; 
 
} 
 

 
.col-md-6, .col-sm-6 { 
 
\t border-bottom: 0; 
 
\t margin-bottom: 0; 
 
\t margin: 0; 
 
} 
 

 
#glyphicon-image { 
 
\t display: block; 
 
    margin: 0 auto; 
 
}
<!-- Section 2 Services --> 
 
    <div id="services" class="container"> 
 
    <div id="services-row" class="row"> 
 
     <h1 id="section-headings">services</h1> 
 
     <div id="services-col" class="col-md-6 col-sm-6"> 
 
      <h2>heading 1</h2> 
 
      <p id="general-text">paragraph text 1</p> 
 
      <img id="glyphicon-image" src="images/bar-chart.png" alt="ux-glyphicon" style="width:128px;height:128px;"> 
 
     </div> 
 
      <div id="services-col" class="col-md-6 col-sm-6"> 
 
      <h2>heading 2</h2> 
 
      <p id="general-text">paragraph text 2</p> 
 
      <img id="glyphicon-image" src="images/domain-registration.png" alt="ux-glyphicon" style="width:128px;height:128px;"> 
 
      </div> 
 
    </div> 
 
    </div> 
 

 
    <!-- Section 3 About --> 
 
    <div id="about" class="container"> 
 
    <div id="about-row" class="row"> 
 
     <h1 id="section-headings">about site</h1> 
 
     <div class="col-md-6 col-sm-6"> 
 
      <img src="..." alt="AboutImage"> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <p>Add the about text here and the about image over there <---</p> 
 
     </div> 
 
    </div> 
 
    </div>

WEBPAGE WITH SMALL RESOLUTION

+0

を彼自身のウェブサイトを行う:) – Salketer

答えて

2

問題は、100VHする高さを設定するという事実にあります。

あなたはおそらく最小の高さは、この方法を100VH(私はあなたが1節では、完全な高さを取ることがしたいことを推測している)が、単独の高さおよび最大高さを残すように設定されている何をすべきか
#services { 
    background-color: #fC99B0; 
    height: 100vh; 
    width: 100%; 
    margin: 0; 
} 

のようにコンテンツの高さが画面の高さよりも高い場合は、要素が大きくなります。

#services { 
    background-color: #fC99B0; 
    min-height: 100vh; 
    width: 100%; 
    margin: 0; 
} 
+0

はい、それ右のmin-height –

0

#section-headings { 
 
\t font-size: 44px; 
 
} 
 

 
h1 { 
 
\t text-align: center; 
 
\t color: #ffffff !important; 
 
} 
 

 
h2 { 
 
\t text-align: center; 
 
} 
 

 
#tag-line { 
 
\t color: #ffffff !important; 
 
} 
 

 
#main-header { 
 
\t margin: 0; 
 
} 
 

 
.jumbotron { 
 
\t background-image: url(../images/alaska-landscape.jpg); 
 
\t background-size: cover; 
 
\t height: 100vh; 
 
\t width: 100%; 
 
\t margin: 0; 
 
} 
 

 
#services { 
 
\t background-color: #fC99B0; 
 
\t  min-height: 100vh; 
 
\t width: 100%; 
 
\t margin: 0; 
 
} 
 

 
#services-col { 
 
\t padding: 80px; 
 
} 
 

 
#general-text { 
 
\t text-align: justify; 
 
} 
 

 
#about { 
 
\t background-color: #8589FC; 
 
\t  min-height: 100vh; 
 
\t width: 100%; 
 
\t margin: 0; 
 
} 
 

 
#previous-work { 
 
\t background-color: #28292D; 
 
\t height: 100vh; 
 
\t width: 100%; 
 
\t margin: 0; 
 
} 
 

 
.col-md-6, .col-sm-6 { 
 
\t border-bottom: 0; 
 
\t margin-bottom: 0; 
 
\t margin: 0; 
 
} 
 

 
#glyphicon-image { 
 
\t display: block; 
 
    margin: 0 auto; 
 
}
<!-- Section 2 Services --> 
 
    <div id="services" class="container"> 
 
    <div id="services-row" class="row"> 
 
     <h1 id="section-headings">services</h1> 
 
     <div id="services-col" class="col-md-6 col-sm-6"> 
 
      <h2>UX Design and SEO</h2> 
 
      <p id="general-text">My main area of focus and expertise is in helping businesses to create a strong, appropriate online presence that helps them connect and communicate with there customers in the best way possible.</p> 
 
      <img id="glyphicon-image" src="images/bar-chart.png" alt="ux-glyphicon" style="width:128px;height:128px;"> 
 
     </div> 
 
      <div id="services-col" class="col-md-6 col-sm-6"> 
 
      <h2>Website Development</h2> 
 
      <p id="general-text">Unlike most UX and SEO consultants, I will not only work with you to design an optimal solution for you and your audience, but I will also implement your solution for you, rather than send you out to fix things on your own.</p> 
 
      <img id="glyphicon-image" src="images/domain-registration.png" alt="ux-glyphicon" style="width:128px;height:128px;"> 
 
      </div> 
 
    </div> 
 
    </div> 
 

 
    <!-- Section 3 About --> 
 
    <div id="about" class="container"> 
 
    <div id="about-row" class="row"> 
 
     <h1 id="section-headings">about nomadic</h1> 
 
     <div class="col-md-6 col-sm-6"> 
 
      <img src="..." alt="AboutImage"> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <p>Add the about text here and the about 
 
     image over there <---</p> 
 
     </div> 
 
    </div> 
 
    </div>

iは、

+0

コードの説明なしには役に立ちません... – Salketer

+0

はいいいえ私は '#services'と'about 'にmin-heightを追加しました。高さだけが高さに問題ありません。 –

0

は、クラスと各コンテナの後にdiv要素を追加ソリューション、それを考えて

COL-SM-12パッド-0

とこのコードを追加してください。 .pad-0 {パディング:0;}

問題を簡単に解決します。

以下の実施例を参照してください:私はUXのコンサルタントを助けるという皮肉好きです

/*--CSS--*/ 
 
\t 
 
    .clrfix{clear:both;} 
 
\t #section-headings { 
 
\t \t font-size: 44px; 
 
\t } 
 
#section-headings { 
 
display: block; 
 
float: left; 
 
width: 100%; 
 
} 
 

 
\t h1 { 
 
\t \t text-align: center; 
 
\t \t color: #ffffff !important; 
 
\t } 
 

 
\t h2 { 
 
\t \t text-align: center; 
 
\t } 
 

 
\t #tag-line { 
 
\t \t color: #ffffff !important; 
 
\t } 
 

 
\t #main-header { 
 
\t \t margin: 0; 
 
\t } 
 

 
\t .jumbotron { 
 
\t \t background-image: url(../images/alaska-landscape.jpg); 
 
\t \t background-size: cover; 
 
\t \t height: 100vh; 
 
\t \t width: 100%; 
 
\t \t margin: 0; 
 
\t } 
 

 
\t #services { 
 
\t \t background-color: #fC99B0; 
 
\t \t height: 100vh; 
 
\t \t width: 100%; 
 
\t \t margin: 0; 
 
\t } 
 

 
\t #services-col { 
 
\t \t padding: 80px; 
 
\t } 
 

 
\t #general-text { 
 
\t \t text-align: justify; 
 
\t } 
 

 
\t #about { 
 
\t \t background-color: #8589FC; 
 
\t \t height: 100vh; 
 
\t \t width: 100%; 
 
\t \t margin: 0; 
 
\t } 
 

 
\t #previous-work { 
 
\t \t background-color: #28292D; 
 
\t \t height: 100vh; 
 
\t \t width: 100%; 
 
\t \t margin: 0; 
 
\t } 
 

 
\t .col-md-6, .col-sm-6 { 
 
\t \t border-bottom: 0; 
 
\t \t margin-bottom: 0; 
 
\t \t margin: 0; 
 
\t } 
 

 
\t #glyphicon-image { 
 
\t \t display: block; 
 
\t \t margin: 0 auto; 
 
\t } 
 
    @media (max-width: 767px){#services-col { padding:0 10%;}
<!--HTML--> 
 
    
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> 
 
\t <!-- Section 2 Services --> 
 
    <div id="services" class="container"> 
 
\t <div class="col-sm-12 pad-0"> 
 
\t \t <div id="services-row" class="row"> 
 
\t \t <h1 id="section-headings">services</h1> 
 
\t \t \t <div id="services-col" class="col-md-6 col-sm-6"> 
 
\t \t \t \t <h2>UX Design and SEO</h2> 
 
\t \t \t \t <p id="general-text">My main area of focus and expertise is in helping businesses to create a strong, appropriate online presence that helps them connect and communicate with there customers in the best way possible.</p> 
 
\t \t \t \t <img id="glyphicon-image" src="images/bar-chart.png" alt="ux-glyphicon" style="width:128px;height:128px;"> 
 
\t \t \t </div> 
 
\t \t \t <div id="services-col" class="col-md-6 col-sm-6"> 
 
\t \t \t \t <h2>Website Development</h2> 
 
\t \t \t \t <p id="general-text">Unlike most UX and SEO consultants, I will not only work with you to design an optimal solution for you and your audience, but I will also implement your solution for you, rather than send you out to fix things on your own.</p> 
 
\t \t \t \t <img id="glyphicon-image" src="images/domain-registration.png" alt="ux-glyphicon" style="width:128px;height:128px;"> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
    </div> 
 
    <div class="clrfix"></div> 
 
    <!-- Section 3 About --> 
 
    <div id="about" class="container"> 
 
\t <div class="col-sm-12 pad-0"> 
 
     <h1 id="section-headings">about nomadic</h1> 
 
\t \t <div id="about-row" class="row"> 
 
\t \t 
 
\t \t <div class="col-md-6 col-sm-6"> 
 
\t \t \t <img src="..." alt="AboutImage"> 
 
\t \t </div> 
 
\t \t <div class="col-sm-6"> 
 
\t \t \t <p>Add the about text here and the about image over there <---</p> 
 
\t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
    </div>

関連する問題