html - 2 item rows wont center and dont act as intended -
alright, have portfolio page i'm working on , reason columns stuck left, margins on auto don't work, float:none doesn't work. i've tried pretty anything. know how fix this?
problem site in question: https://jsfiddle.net/p3jgjnbr/
.logo { font-size: 20px; color: white; font-family: monospace; -webkit-transition: ease 0.2s; -moz-transition: ease 0.2s; -o-transition: ease 0.2s; transition: ease 0.2s; } .intro-nav { margin-bottom: 50px; } #logo:hover { font-size: 20px; color: green; font-family: monospace; background-color: white; border-color: white; border-bottom: solid green; } #navlist li { -moz-transition: ease 0.2s -o-transition: ease 0.2s; -webkit-transition: ease 0.2s; transition: ease 0.2s; font-family: monospace; font-size: 20px; } #navlist li:hover { background-color: green; font-family: monospace; border-bottom: solid white; } .slight-round { border-radius: 10px; } .anon { width: 400px; border-radius: 200px; } #imgwrap { padding-top: 50px; } .about { padding-left: 20px; padding-bottom: 30px; background-color: white; margin-top: 60px; border-left: thick solid #ff0000; font-family: monospace; font-size: ?px; } #portfolio { padding-top: 50px; } .projects { border-top-left-radius: 10px; border-top-right-radius: 10px; } #row1 div p { max-width: 306px; background-color: lightgrey; border-color: lightgrey; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; padding-left: 5px; } #row2 div p { max-width: 306px; background-color: lightgrey; border-color: lightgrey; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; padding-left: 5px; } #row3 div p { max-width: 306px; background-color: lightgrey; border-color: lightgrey; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; padding-left: 5px; } #row1 div img { border: lightgrey solid; border-top-left-radius: 10px; border-top-right-radius: 10px; } #row2 div img { border: lightgrey solid; border-top-left-radius: 10px; border-top-right-radius: 10px; } #row3 div img { border: lightgrey solid; border-top-left-radius: 10px; border-top-right-radius: 10px; } #me { padding-bottom: 20px; padding-top: 50px; } .background1 { background: url("https://40.media.tumblr.com/1b916597d3e174399cb7adadddb66ede/tumblr_nt5uk4psl31ud7rr3o1_1280.jpg") center center fixed; background-size: cover; height: 700px; text-align: center; padding-bottom: 50px; } .background2 { background: url("http://assets.inhabitat.com/wp-content/blogs.dir/1/files/2015/12/wind-turbine-at-sunset.jpg") center center fixed; height: ?px; text-align: center; padding-bottom: 50px; } .socialmedia { background-color: lightgrey; } .socialbuttons { padding: 30px 30px; padding-bottom: 100px; } .head1 { display: table; margin: 0 auto; } .head1 p { font-family: monospace; font-size: 25px; padding: 0px 0px; margin: 0px 0px; } .btn-circle.btn-xl { background-position: center; position: relative; width: 100px; height: 100px; padding: 10px 16px; font-size: 24px; line-height: 1.33; border-radius: 65px; -moz-transition: ease 0.2s; -webkit-transition: ease 0.2s; -o-transition: ease 0.2s; transition: ease 0.2s; } .btn-circle.btn-xl:hover { width: 155px; height: 100px; padding: 10px 16px; font-size: 24px; line-height: 1.33; border-radius: 35px; } .btn-circle.btn-xl:hover .btndes { visibility: visible; opacity: 1; } .btndes { position: absolute; padding-top: 45px; font-size: 20px; top: 0; bottom: 0; left: 0; right: 0; visibility: hidden; opacity: 0; -webkit-transition: ease 0.2s; -o-transition: ease 0.2s; -moz-transition: ease 0.2s; transition: ease 0.2s; } .btnwrap:hover .btndes { visibility: visible; opacity: 1; } .socialmed { border-bottom: solid black; } .cntmebtn { font-size: 1.7em; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <body> <div class="background1 container-fluid"> <div class="container-fluid"> <div class="navbar navbar-inverse navbar-fixed-top intro-nav"> <div class="container"> <a href="#" class="navbar-brand logo" id="logo"> struckcroissant </a> <button class="navbar-toggle slight-round" type="button" data-toggle="collapse" data-target=".navheadercollapse"> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button> <div class="collapse navbar-collapse navheadercollapse"> <ul class="nav navbar-nav navbar-right" id="navlist"> <li><a href="#me">about me</a> </li> <li><a href="#portfolio">portfolio</a> </li> <li><a href="#contact">contact me</a> </li> </ul> </div> </div> </div> <div class="container-fluid" id="me"> <div class="row" id="abtrow1"> <div class="col-md-12 col-sm-12" id="imgwrap"> <img src="http://67.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5fk1qcnibxo1_540.png" class="anon"> <p class="anon"></p> </div> </div> <div class="row" id="abtrow2"> <div class="col-md-12 col-sm-12"> <p class="about"> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p> </div> </div> </div> </div> </div> <div class="background2" id="portfolio"> <div class="container-fluid"> <div class="row row-centered" id="row1"> <div class="col-md-6 col-centered"> <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive"> <p>go ahead , guess picture is...thats right! filler!</p> </div> <div class="col-md-6 col-centered"> <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive"> <p>being filler hard sometimes, but, @ least im not looking @ one...oh wait!</p> </div> </div> <div class="row row-centered" id="row2"> <div class="col-md-6 col-centered"> <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive"> <p>go ahead , guess picture is...thats right! filler!</p> </div> <div class="col-md-6 col-centered"> <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive"> <p>being filler hard sometimes, but, @ least im not looking @ one...oh wait!</p> </div> </div> <div class="row row-centered" id="row3"> <div class="col-md-6 col-centered"> <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive"> <p>if make end of these fillers might give treat!</p> </div> <div class="col-md-6 col-centered"> <div class="portfolio-content"> <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive"> <p>i looked in cupboards alas, treats found</p> </div> </div> </div> </div> </div> <div class="socialmedia" id="contact"> <div class="row"> <div class="col-md-12 socialmed"> <div class="head1"> <p>contact me</p> </div> </div> </div> <div class="container-fluid"> <div class="row row-centered socialbuttons"> <div class="col-md-3 col-sm-3"> <a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-facebook fa-fw fb cntmebtn"></i><p class="btndes">facebook</p></a> </div> <div class="col-md-3 col-sm-3"> <a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl fire"><i class="fa fa-fire fa-fw fb cntmebtn"></i><p class="btndes">freecodecamp</p></a> </div> <div class="col-md-3 col-sm-3"> <a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-linkedin fa-fw fb cntmebtn"></i><p class="btndes">linkedin</p></a> </div> <div class="col-md-3 col-sm-3"> <a href="https://github.com/struckcroissant" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-github fa-fw fb cntmebtn"></i><p class="btndes">github</p></a> </div> </div> </div> </div> </body>as can plainly see of placeholder pictures , social media buttons left aligned, appreciate every bit of help. thank you!
try this
.logo { font-size: 20px; color: white; font-family: monospace; -webkit-transition: ease 0.2s; -moz-transition: ease 0.2s; -o-transition: ease 0.2s; transition: ease 0.2s; } .intro-nav { margin-bottom: 50px; } #logo:hover { font-size: 20px; color: green; font-family: monospace; background-color: white; border-color: white; border-bottom: solid green; } #navlist li { -moz-transition: ease 0.2s -o-transition: ease 0.2s; -webkit-transition: ease 0.2s; transition: ease 0.2s; font-family: monospace; font-size: 20px; } #navlist li:hover { background-color: green; font-family: monospace; border-bottom: solid white; } .slight-round { border-radius: 10px; } .anon { width: 400px; border-radius: 200px; } #imgwrap { padding-top: 50px; } .about { padding-left: 20px; padding-bottom: 30px; background-color: white; margin-top: 60px; border-left: thick solid #ff0000; font-family: monospace; font-size: ?px; } #portfolio { padding-top: 50px; } .projects { border-top-left-radius: 10px; border-top-right-radius: 10px; } #row1 div p { max-width: 306px; background-color: lightgrey; border-color: lightgrey; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; padding-left: 5px; margin: 0 auto; } #row2 div p { max-width: 306px; background-color: lightgrey; border-color: lightgrey; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; padding-left: 5px; margin: 0 auto; } #row3 div p { max-width: 306px; background-color: lightgrey; border-color: lightgrey; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; padding-left: 5px; margin: 0 auto; } #row1 div img { border: lightgrey solid; border-top-left-radius: 10px; border-top-right-radius: 10px; margin: 0 auto; } #row2 div img { border: lightgrey solid; border-top-left-radius: 10px; border-top-right-radius: 10px; margin: 0 auto; } #row3 div img { border: lightgrey solid; border-top-left-radius: 10px; border-top-right-radius: 10px; margin: 0 auto; } #me { padding-bottom: 20px; padding-top: 50px; } .background1 { background: url("https://40.media.tumblr.com/1b916597d3e174399cb7adadddb66ede/tumblr_nt5uk4psl31ud7rr3o1_1280.jpg") center center fixed; background-size: cover; height: 700px; text-align: center; padding-bottom: 50px; } .background2 { background: url("http://assets.inhabitat.com/wp-content/blogs.dir/1/files/2015/12/wind-turbine-at-sunset.jpg") center center fixed; height: ?px; text-align: center; padding-bottom: 50px; } .socialmedia { background-color: lightgrey; } .socialbuttons { padding: 30px 30px; padding-bottom: 100px; } .head1 { display: table; margin: 0 auto; } .head1 p { font-family: monospace; font-size: 25px; padding: 0px 0px; margin: 0px 0px; } .btn-circle.btn-xl { background-position: center; position: relative; width: 100px; height: 100px; padding: 10px 16px; font-size: 24px; line-height: 1.33; border-radius: 65px; -moz-transition: ease 0.2s; -webkit-transition: ease 0.2s; -o-transition: ease 0.2s; transition: ease 0.2s; } .btn-circle.btn-xl:hover { width: 155px; height: 100px; padding: 10px 16px; font-size: 24px; line-height: 1.33; border-radius: 35px; } .btn-circle.btn-xl:hover .btndes { visibility: visible; opacity: 1; } .btndes { position: absolute; padding-top: 45px; font-size: 20px; top: 0; bottom: 0; left: 0; right: 0; visibility: hidden; opacity: 0; -webkit-transition: ease 0.2s; -o-transition: ease 0.2s; -moz-transition: ease 0.2s; transition: ease 0.2s; } .btnwrap:hover .btndes { visibility: visible; opacity: 1; } .socialmed { border-bottom: solid black; } .cntmebtn { font-size: 1.7em; } .row-centered{ margin: 0 auto !important; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <body> <div class="background1 container-fluid"> <div class="container-fluid"> <div class="navbar navbar-inverse navbar-fixed-top intro-nav"> <div class="container"> <a href="#" class="navbar-brand logo" id="logo"> struckcroissant </a> <button class="navbar-toggle slight-round" type="button" data-toggle="collapse" data-target=".navheadercollapse"> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button> <div class="collapse navbar-collapse navheadercollapse"> <ul class="nav navbar-nav navbar-right" id="navlist"> <li><a href="#me">about me</a> </li> <li><a href="#portfolio">portfolio</a> </li> <li><a href="#contact">contact me</a> </li> </ul> </div> </div> </div> <div class="container-fluid" id="me"> <div class="row" id="abtrow1"> <div class="col-md-12 col-sm-12" id="imgwrap"> <img src="http://67.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5fk1qcnibxo1_540.png" class="anon"> <p class="anon"></p> </div> </div> <div class="row" id="abtrow2"> <div class="col-md-12 col-sm-12"> <p class="about"> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p> </div> </div> </div> </div> </div> <div class="background2" id="portfolio"> <div class="container-fluid"> <div class="row row-centered" id="row1"> <div class="col-md-6 col-centered"> <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive"> <p>go ahead , guess picture is...thats right! filler!</p> </div> <div class="col-md-6 col-centered"> <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive"> <p>being filler hard sometimes, but, @ least im not looking @ one...oh wait!</p> </div> </div> <div class="row row-centered" id="row2"> <div class="col-md-6 col-centered"> <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive"> <p>go ahead , guess picture is...thats right! filler!</p> </div> <div class="col-md-6 col-centered"> <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive"> <p>being filler hard sometimes, but, @ least im not looking @ one...oh wait!</p> </div> </div> <div class="row row-centered" id="row3"> <div class="col-md-6 col-centered"> <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive"> <p>if make end of these fillers might give treat!</p> </div> <div class="col-md-6 col-centered"> <div class="portfolio-content"> <img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive"> <p>i looked in cupboards alas, treats found</p> </div> </div> </div> </div> </div> <div class="socialmedia" id="contact"> <div class="row row-centered"> <div class="col-md-12 socialmed"> <div class="head1"> <p>contact me</p> </div> </div> </div> <div class="container-fluid"> <div class="row row-centered socialbuttons"> <div class="col-md-3 col-sm-3 text-center"> <a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-facebook fa-fw fb cntmebtn"></i><p class="btndes">facebook</p></a> </div> <div class="col-md-3 col-sm-3 text-center"> <a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl fire"><i class="fa fa-fire fa-fw fb cntmebtn"></i><p class="btndes">freecodecamp</p></a> </div> <div class="col-md-3 col-sm-3 text-center"> <a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-linkedin fa-fw fb cntmebtn"></i><p class="btndes">linkedin</p></a> </div> <div class="col-md-3 col-sm-3 text-center"> <a href="https://github.com/struckcroissant" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-github fa-fw fb cntmebtn"></i><p class="btndes">github</p></a> </div> </div> </div> </div> </body>
Comments
Post a Comment