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
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
Post a Comment