javascript - Heading in Mobile View Cut Off -


my headings in carousel cut off when visit page in mobile view.

website here... www.jocatcreative.com

screen shot if issue linked below

http://imgur.com/nwpkiup

below html carousel... update css info if needed.

<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 slides -->         <div class="carousel-inner">           <div class="item active">             <img src="images/greyroad.jpg" alt="going beach">             <div class="carousel-caption">               <h2>welcome portfolio.</h2>               <p>i've developed website scratch showcase passion web design. please exlpore page , links various projects.<br> special 1 month guys in nyc inspiring me.</p>             </div>           </div>           <div class="item">             <img src="images/nycstreet.jpg" alt="brooklyn bridge">             <div class="carousel-caption">               <h2>i love work startup in nyc.</h2>               <p>there huge startup boom in nyc seems fun, new, , exciting. new york attracts of brightest, intelligent, , creative people willing take risks. 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 more info.</h2>                 <p>thanks taking time visit. feel free e-mail me inquiries, questions, or comments. follow me on twitter</p>             </div>           </div>         </div><!-- .carousel-inner -->  

---edited 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; }  {     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;     } } 

your text large container.

try adjusting font size media queries:

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

Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -