javascript - 移动 View 中的标题 chop

Question

当我在移动设备 View 中访问我的页面时，轮播中的标题被 chop 了。

网站在这里... www.jocatcreative.com

如果问题链接在下方，则为屏幕截图

http://imgur.com/nWpKiuP

下面是我的 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;
    }
}