標題在移動視圖中關閉

Question

當我在移動視圖中訪問我的頁面時，我的旋轉木馬中的標題被切斷。如果跌破

http://imgur.com/nWpKiuP

跌破發行掛鉤

網站在這裏... www.jocatcreative.com

屏幕截圖是我的旋轉木馬HTML ...請問用CSS信息更新如果需要的話。

<div class="banner"> 

     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
      <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
      <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
     </ol> 

     <!-- Wrapper for slides --> 
     <div class="carousel-inner"> 
      <div class="item active"> 
      <img src="images/greyroad.jpg" alt="Going to the beach"> 
      <div class="carousel-caption"> 
       <h2>Welcome to my portfolio.</h2> 
       <p>I've developed a website from scratch to showcase my passion for web design. Please exlpore the page and links to various projects.<br> Special thanks to the One Month guys in NYC for inspiring me.</p> 
      </div> 
      </div> 
      <div class="item"> 
      <img src="images/nycstreet.jpg" alt="Brooklyn Bridge"> 
      <div class="carousel-caption"> 
       <h2>I would love to work for a Startup in NYC.</h2> 
       <p>There is a huge startup boom in NYC that seems fun, new, and exciting. New York attracts some of the brightest, most intelligent, and creative people who are willing to take risks. I want in!</p> 
      </div> 
      </div> 
      <div class="item"> 
      <img src="images/planemotor.jpg" alt="Pot of Tea"> 
      <div class="carousel-caption"> 
       <h2>Please scroll below for more info.</h2> 
       <p>Thanks for taking the time to visit. Feel free to e-mail me for inquiries, questions, or comments. Also follow me on Twitter</p> 
      </div> 
      </div> 
     </div><!-- .carousel-inner --> 

---編輯的CSS ---

/*----------------------------------------------------------------------------- 
=MAIN STYLES 
-----------------------------------------------------------------------------*/ 

.banner img { 
    width: 100%; 
} 

.marketing .row { 
    text-align: center; 
} 


.navbar { 
    margin-bottom: 0; /* removes default excess margin */ 
    } 

.divider { 
    margin: 80px 0; 
} 

.featurette-heading { 
    font-weight: 300; 
    line-height: 1; 
    letter-spacing: -1px; 
} 

.companies h3 { 
    margin-bottom: 40px; 
} 

.companies img { 
    margin: 50px 0; 
} 

footer { 
    background: url('../images/grey-texture.jpg'); 
    padding: 40px; 
} 

a { 
    color: gray; 
} 

.custom-navbar { 
    background: transparent; 
    border: 0px; 
} 
@media (max-width:767px) { 
    .custom-navbar .name { 
     font-size: 20px; 
     float: left; 
     margin: 0; 
     padding: 15px 0 15px 15px; 
    } 
    .custom-navbar .navbar-toggle { 
     margin: 10px 15px 0 0; 
     float: right; 
    } 
} 
@media (min-width:768px) { 
    .custom-navbar .navbar-header { 
     width: 100%; 
     margin: 0; 
    } 
    .custom-navbar .name { 
     text-align: center; 
     float: none; 
    } 
} 

Answer 1

您的文字簡直就是你的容器太大。

嘗試用媒體查詢調整字體大小：

@media all and (max-width: 500px) 
{ 
    div.banner h2 
    { 
     font-size:20px; 
    } 
}