http://codepen.io/irvingg/pen/adqaxg
the url above portfolio i'm working through freecodecamp there can see code html , css. having difficulties how page viewed through small devices. pages smaller contents disappear underneath. when view page on desktop looks how want not on mobile. i'm not sure contact section it's not main concern. or ideas on how fix page or did wrong behave way. thank in advanced.
<body> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand">irving gonzalez</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#slide2">home</a></li> <li><a href="#slide2">about</a></li> <li><a href="#slide3">projects</a></li> <li><a href="#slide4">contact</a></li> </ul> </div> </div> </div> <!----- slides start ---> <div class="jumbotron" id="slide1"> <div class="container"> <h1>portfolio</h1> <p><a class="btn btn-primary btn-md" href="#slide3" role="button">projects</a></p> </div> </div> <div id="slide2"> <div class="container"> <div class="row"> <div class="col-xs-11 col-sm-6 col-md-offset-1 col-md-5 col-lg-offset-0 col-lg-6"> <h1 class="text-center" id="about">about</h1> <p class="text-justify lead text-muted" id="aboutme"> hi there! name irving gonzalez , <b>computer science</b> student @ <b>john jay college of criminal justice</b>. currently, working towards becoming full stack web developer of curriculum <b>freecodecamp</b> other self-taught web services. have passion innovation, deviation, technology, , languages. <br> <br> below of projects i've completed. <p> </div> <div class="col-xs-11 col-sm-6 col-md-5 col-lg-6"> <img src="http://i66.tinypic.com/rm7495.jpg" alt="design thing" class="img-rounded img-responsive" id="aboutimage"> </div> </div> </div> </div> <div id="slide3"> <div class="container"> <h1 class="text-center">works</h1> <div class="row"> <div class="col-xs-11 col-sm-offset-3 col-sm-2 col-offset-1 col-sm-3"> <a href="http://codepen.io/irvingg/full/bjvvjb/" class="thumbnail" id="workthumbnails"><img src="http://i67.tinypic.com/9u8ytv.jpg" class="img-rounded" alt="future project"> <div class="caption text-center"> <h4>random quotes</h4></div> </a> </div> <div class="col-xs-11 col-sm-2 col-sm-3"> <a class="thumbnail" id="workthumbnails"><img src="https://cdn4.iconfinder.com/data/icons/under-construction/512/coming_soon-256.png" alt="future project"> <div class="caption text-center"> <h4>basic calculator</h4></div> </a> </div> <div class="col-xs-11 col-sm-2 col-sm-3"> <a class="thumbnail" id="workthumbnails"><img src="https://cdn4.iconfinder.com/data/icons/under-construction/512/coming_soon-256.png" alt="future project"> <div class="caption text-center"> <h4>future project</h4></div> </a> </div> </div> <div class="row"> <div class="col-xs-11 col-sm-offset-3 col-sm-2 col-offset-1 col-sm-3"> <a class="thumbnail" id="workthumbnails"><img src="https://cdn4.iconfinder.com/data/icons/under-construction/512/coming_soon-256.png" alt="future project"> <div class="caption text-center"> <h4>future project</h4></div> </a> </div> <div class="col-xs-11 col-sm-2 col-sm-3"> <a class="thumbnail" id="workthumbnails"><img src="https://cdn4.iconfinder.com/data/icons/under-construction/512/coming_soon-256.png" alt="future project"> <div class="caption text-center"> <h4>future project</h4></div> </a> </div> <div class="col-xs-11 col-sm-2 col-sm-3"> <a class="thumbnail" id="workthumbnails"><img src="https://cdn4.iconfinder.com/data/icons/under-construction/512/coming_soon-256.png" alt="future project"> <div class="caption text-center"> <h4>future project</h4></div> </a> </div> </div> </div> </div> <div id="slide4"> <div class="container text-center"> <div class="row"> <!-- ether move these bottom or delete them --> <div class="col-xs-1 col-sm-offset-3"> <a href="mailto:irv.jgonz@gmail.com" alt="irv.jgonz@gmail.com"><i class="fa fa-envelope fa-2x"></i></a></div> <div class="col-xs-1"> <a href="http://www.freecodecamp.com/irvgonz" alt="freecodecamp" target="_blank"> <i class="fa fa-fire fa-2x"></i></a> </div> <div class="col-xs-1"><a href="http://github.com/irvgonz" target="_blank"><i class="fa fa-github-square fa-2x"></i></a></div> <div class="col-xs-1"><a href="https://www.linkedin.com/in/irving" target="_blank"><i class="fa fa-linkedin-square fa-2x"></i></a></div> <div class="col-xs-1"><a href="https://www.facebook.com/irving.gonzalez.1466" target="_blank"><i class="fa fa-facebook-official fa-2x"></i></a></div> <div class="col-xs-1"><a href="https://twitter.com/g0_irving" target="_blank"><i class="fa fa-twitter-square fa-2x"></i></a></div> </div> <div class="row"> <div class "col-sm-offset-3 col-sm-6"> <h2>get in touch</h2> <p>do have questions, comments, or want hello? <br>send me message through social media above. <br>i'll more happy you! </p> <address> <strong>irving gonzalez</strong><br> 1234 madeup place<br> new york, ny 10040<br> <i class="fa fa-phone fa-1x"></i> (123) 456-7890<br> <a href="mailto:irv.jgonz@gmail.com"><i class="fa fa-envelope fa-1x"> irv.jgonz@gmail.com</i></a> </address> </div> </div> </div> </div> <div class="navbar navbar-inverse navbar-static-bottom" role="navigation"> <div class="container"> <div class="navbar-text pull-left"> <p>@ 2016 irving gonzalez</p> </div> <!-- <div class="navbar-text pull-right"> <a href="mailto:irv.jgonz@gmail.com" alt="irv.jgonz@gmail.com"><i class="fa fa-envelope fa-2x"></i></a> <a href="http://www.freecodecamp.com/irvgonz" alt="freecodecamp" target="_blank"><i class="fa fa-fire fa-2x"></i></a> <a href="http://github.com/irvgonz" target="_blank"><i class="fa fa-github-square fa-2x"></i></a> <a href="https://www.linkedin.com/in/irving" target="_blank"><i class="fa fa-linkedin-square fa-2x"></i></a> <a href="https://www.facebook.com/irving.gonzalez.1466" target="_blank"><i class="fa fa-facebook-official fa-2x"></i></a> <a href="https://twitter.com/g0_irving" target="_blank"><i class="fa fa-twitter-square fa-2x"></i></a> put social media @ bottom--> </div> </div> </div> </body> #about{ color: #404040; } #aboutimage{ box-shadow: 5px 5px 20px grey; } #aboutme{ background-color: #f2f2f2; padding:15px; border:rounded; } #workthumbnails{ box-shadow: 5px 5px 20px grey; } #slide2 .container{ position: relative; right: 50px; font-weight:bold; } #slide4 .row a{ /*this changes color of links not delete*/ color: inherit; text-decoration: none; } /* navbar links on bottom in case want switch it. .navbar .container a{ color: inherit; text-decoration: none; padding-left: 20px; } */ .jumbotron { background: url("http://i64.tinypic.com/33nvoft.jpg") 50% 0 no-repeat fixed; color: #fff; height: 670px; padding: 200px 0 260px 0; background-size: cover; } #slide2 { background-color: #fff; color: #333333; height: 600px; margin: 20px; overflow: hidden; padding: 0px; } #slide3 { background-color: #fff; color: #333333; height: 700px; padding: 20px; overflow: hidden; } #slide4 { background: url("http://i66.tinypic.com/x6eyw.jpg") 50% 0 no-repeat fixed; height: 550px; margin: 0 auto; padding-top:25px; color: #fff; background-size: cover; }
use css
#slide3 { background-color: #fff; color: #333333; height: 100%; padding: 20px; overflow: hidden; } this extend main content slide height of available window.
Comments
Post a Comment