(09/30/2015) solution problem added @ bottom
i've been searching , playing css files can't seem correctly, instead, i'm patching css bad solutions.
current setup
i have row <div class="row-fluid"> , row has 24 columns div <div class="col-xs-1 skills-item">. looks fine me when i'm on desktop, when i'm in mobile device, move around , setup ugly centering position.
i wanted use row-fluid option because didn't want 24 columns stacking , taking space.
see images below.
full screen
smaller screen
even smaller screen
mobile
what did
i added media queries handle different screen sizes, i'm sure hard coded way , should avoid as possible. here's snippet
@media(max-width:1000px) { #skills .skills-item { margin-right: 30px; } } @media(min-width: 1001px) , (max-width: 1200px){ #skills .skills-item { margin-right: 30px; margin-left: 5px; } } @media(max-width: 767px) { #skills .skills-item { margin-right: 55px; margin-left: 15px; } } @media(max-width: 466px) { #skills .skills-item { margin-right: 40px; margin-left: 40px; } } @media(max-width: 376px) { #skills .skills-item { margin-right: 40px; margin-left: 30px; } } i mean works, still ugly on sizes.
question
is there clean solution make these columns center?
something margin: 0 auto; , centering of perfect, didn't work. (or maybe couldn't find place that)
the website i'm making online test purposes (not finished @ all) here
thank you!
edit : added html , css
html code of section. i'm pretty sure don't need 24 items here.
<!-- skill overview --> <section class="success" id="skills"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>skill overview</h2> <hr class="skills-hr"> </div> </div> <div class="row-fluid"> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <span class="skill-icon" style="font-size:150%; color:#fff;">java</span> <span class="skill-name" style="font-size:150%;">java</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <span class="skill-icon" style="font-size:150%; color:#fff;">c</span> <span class="skill-name" style="font-size:150%;">c</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <span class="skill-icon" style="font-size:150%; color:#fff;">c++</span> <span class="skill-name" style="font-size:150%;">c++</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <span class="skill-icon" style="font-size:150%; color:#fff;">c#</span> <span class="skill-name" style="font-size:150%;">c#</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link" style="padding-top:30px"> <span class="skill-icon" style="color:#fff;">python</span> <span class="skill-name">python</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link" style="padding-top:30px"> <span class="skill-icon" style="color:#fff;">sparc</span> <span class="skill-name two-lines" style="font-size:90%">sparc assembly</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link" style="padding-top:30px"> <span class="skill-icon" style="font-size:120%; color:#fff;">mips</span> <span class="skill-name two-lines" style="font-size:90%">mips assembly</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-android fa-2x"></i> <span class="skill-name icon-one-line">android</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-html5 fa-2x"></i> <span class="skill-name icon-one-line" style="font-size:120%;">html5</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-css3 fa-2x"></i> <span class="skill-name icon-one-line" style="font-size:120%;">css3</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <span class="skill-icon" style="font-size:150%; color:#fff;">js</span> <span class="skill-name icon-one-line" style="font-size:90%">javascript</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <img alt="php" class="skill-icon" src="images/php-logo.png" style="width:80%; margin-top:-10px"> <span class="skill-name">php script</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <img alt="apache" class="skill-icon" src="images/apache-logo.png" style="width:75%;"> <span class="skill-name">apache server</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-database fa-2x"></i> <span class="skill-name" style="font-size:90%">sql database</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <img alt="aws" class="skill-icon" src="images/aws-logo.png" style="width:50%;"> <span class="skill-name" style="font-size:85%">amazon web services</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-linux fa-2x"></i> <span class="skill-name icon-one-line" style="font-size:120%;">linux</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-apple fa-2x"></i> <span class="skill-name icon-one-line" style="font-size:120%;">osx</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-windows fa-2x"></i> <span class="skill-name icon-one-line" style="font-size:90%;">windows</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-git fa-2x"></i> <span class="skill-name" style="font-size:75%">version control <br>(git, svn)</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <img alt="eclipse" class="skill-icon" src="images/eclipse-logo.png" style="width:40%;"> <span class="skill-name icon-one-line">eclipse</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <img alt="unity3d" class="skill-icon" src="images/unity3d-logo.png" style="width:40%;"> <span class="skill-name icon-one-line">unity3d</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <img alt="gdb" class="skill-icon" src="images/gdb-logo.png" style="width:70%; margin-top:-15px"> <span class="skill-name icon-one-line" style="font-size:120%;">gdb</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-stack-exchange fa-2x"></i> <span class="skill-name two-lines" style="font-size:90%;">stack exchange</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-pulse-grow skills-link skill-love"> <i class="skill-icon fa fa-heart fa-2x"></i> <span class="skill-name icon-one-line" style="color: #000; font-size: 120%"><b>love</b></span> </div> </div> </div> </div> </section> <!-- /skill overview --> css part
/* skill settings */ .skill-name { color: #fff; display: none; } .skills-link:hover .skill-name { display: table; margin: 0 auto; } .skills-link:hover .two-lines { margin-top: -5px; } .skills-link:hover .icon-one-line { padding-top: 5px; } .skills-link:hover .skill-icon{ display: none; } #skills .skills-item { right: 0; margin-top: 15px; } #skills .skills-item .skills-link { display: block; position: relative; margin: 0 auto; width: 80px; height: 80px; background-color: #0f1a23; text-align: center; padding-top: 25px; } #skills .skills-link:hover { background-color: #000; -webkit-transition: ease 1.25s; -moz-transition: ease 1.25s; transition: ease 1.25s; } #skills .skill-love:hover { background-color: #ff0000; -webkit-transition: ease 1.25s; -moz-transition: ease 1.25s; transition: ease 1.25s; } #skills * { z-index: 2; } @media(max-width:1000px) { #skills .skills-item { margin-right: 30px; } } @media(min-width: 1001px) , (max-width: 1200px){ #skills .skills-item { margin-right: 30px; margin-left: 5px; } } @media(max-width: 767px) { #skills .skills-item { margin-right: 55px; margin-left: 15px; } } @media(max-width: 466px) { #skills .skills-item { margin-right: 40px; margin-left: 40px; } } @media(max-width: 376px) { #skills .skills-item { margin-right: 40px; margin-left: 30px; } } /* end skill settings */ solution
index.html
<!-- skill overview --> <section class="success" id="skills"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>skill overview</h2> <hr class="skills-hr"> </div> </div> <!-- notice changed row-fluid row--> <!-- changed each columns col-xs-1 col-sm-1 --> <div class="row"> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link"> <span class="skill-icon" style="font-size:150%; color:#fff;">java</span> <span class="skill-name" style="font-size:150%;">java</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link"> <span class="skill-icon" style="font-size:150%; color:#fff;">c</span> <span class="skill-name" style="font-size:150%;">c</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link"> <span class="skill-icon" style="font-size:150%; color:#fff;">c++</span> <span class="skill-name" style="font-size:150%;">c++</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link"> <span class="skill-icon" style="font-size:150%; color:#fff;">c#</span> <span class="skill-name" style="font-size:150%;">c#</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link" style="padding-top:30px"> <span class="skill-icon" style="color:#fff;">python</span> <span class="skill-name">python</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link" style="padding-top:30px"> <span class="skill-icon" style="color:#fff;">sparc</span> <span class="skill-name two-lines" style="font-size:90%">sparc assembly</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link" style="padding-top:30px"> <span class="skill-icon" style="font-size:120%; color:#fff;">mips</span> <span class="skill-name two-lines" style="font-size:90%">mips assembly</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-android fa-2x"></i> <span class="skill-name icon-one-line">android</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-html5 fa-2x"></i> <span class="skill-name icon-one-line" style="font-size:120%;">html5</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-css3 fa-2x"></i> <span class="skill-name icon-one-line" style="font-size:120%;">css3</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link"> <span class="skill-icon" style="font-size:150%; color:#fff;">js</span> <span class="skill-name icon-one-line" style="font-size:90%">javascript</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link"> <img alt="php" class="skill-icon" src="images/php-logo.png" style="width:80%; margin-top:-10px"> <span class="skill-name">php script</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link"> <img alt="apache" class="skill-icon" src="images/apache-logo.png" style="width:75%;"> <span class="skill-name">apache server</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-database fa-2x"></i> <span class="skill-name" style="font-size:90%">sql database</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link"> <img alt="aws" class="skill-icon" src="images/aws-logo.png" style="width:50%;"> <span class="skill-name" style="font-size:85%">amazon web services</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-linux fa-2x"></i> <span class="skill-name icon-one-line" style="font-size:120%;">linux</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-apple fa-2x"></i> <span class="skill-name icon-one-line" style="font-size:120%;">osx</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-windows fa-2x"></i> <span class="skill-name icon-one-line" style="font-size:90%;">windows</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-git fa-2x"></i> <span class="skill-name" style="font-size:75%">version control <br>(git, svn)</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link"> <img alt="eclipse" class="skill-icon" src="images/eclipse-logo.png" style="width:40%;"> <span class="skill-name icon-one-line">eclipse</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link"> <img alt="unity3d" class="skill-icon" src="images/unity3d-logo.png" style="width:40%;"> <span class="skill-name icon-one-line">unity3d</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link"> <img alt="gdb" class="skill-icon" src="images/gdb-logo.png" style="width:70%; margin-top:-15px"> <span class="skill-name icon-one-line" style="font-size:120%;">gdb</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-stack-exchange fa-2x"></i> <span class="skill-name two-lines" style="font-size:90%;">stack exchange</span> </div> </div> <div class="col-sm-1 skills-item"> <div class="hvr-pulse-grow skills-link skill-love"> <i class="skill-icon fa fa-heart fa-2x"></i> <span class="skill-name icon-one-line" style="color: #000; font-size: 120%"><b>love</b></span> </div> </div> </div> </div> </section> <!-- /skill overview --> stylesheet.css
/* skill settings */ .skill-name { color: #fff; display: none; } .skills-link:hover .skill-name { display: table; margin: 0 auto; } .skills-link:hover .two-lines { margin-top: -5px; } .skills-link:hover .icon-one-line { padding-top: 5px; } .skills-link:hover .skill-icon { display: none; } #skills { text-align: center; } #skills .skills-item { right: 0; margin-top: 0px; display: inline-block; width: 95px; height:95px; overflow: hidden; } #skills .skills-item .skills-link { display: block; position: relative; margin: 0 auto; width: 80px; height: 80px; background-color: #0f1a23; text-align: center; padding-top: 25px; box-sizing: border-box; } #skills .skills-link:hover { background-color: #000; -webkit-transition: ease 1.25s; -moz-transition: ease 1.25s; transition: ease 1.25s; } #skills .skill-love:hover { background-color: #ff0000; -webkit-transition: ease 1.25s; -moz-transition: ease 1.25s; transition: ease 1.25s; } #skills * { z-index: 2; } .col-sm-1 { padding: 0; } /* end skill settings */ screenshots
here working solution modified code.
the css
/* skill settings */ .skill-name { color: #fff; display: none; } .skills-link:hover .skill-name { display: table; margin: 0 auto; } .skills-link:hover .two-lines { margin-top: -5px; } .skills-link:hover .icon-one-line { padding-top: 5px; } .skills-link:hover .skill-icon{ display: none; } #skills{ text-align: center; } #skills .skills-item { right: 0; margin-top: 0px; display: inline-block; width: 80px; height: 80px; overflow: hidden; } #skills .skills-item .skills-link { display: block; position: relative; margin: 0 auto; width: 80px; height: 80px; background-color: #0f1a23; text-align: center; padding-top: 25px; box-sizing: border-box; } #skills .skills-link:hover { background-color: #000; -webkit-transition: ease 1.25s; -moz-transition: ease 1.25s; transition: ease 1.25s; } #skills .skill-love:hover { background-color: #ff0000; -webkit-transition: ease 1.25s; -moz-transition: ease 1.25s; transition: ease 1.25s; } #skills * { z-index: 2; } /* end skill settings */ the html
<!-- skill overview --> <section class="success" id="skills"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>skill overview</h2> <hr class="skills-hr"> </div> </div> <div class="row-fluid"> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <span class="skill-icon" style="font-size:150%; color:#fff;">java</span> <span class="skill-name" style="font-size:150%;">java</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <span class="skill-icon" style="font-size:150%; color:#fff;">c</span> <span class="skill-name" style="font-size:150%;">c</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <span class="skill-icon" style="font-size:150%; color:#fff;">c++</span> <span class="skill-name" style="font-size:150%;">c++</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <span class="skill-icon" style="font-size:150%; color:#fff;">c#</span> <span class="skill-name" style="font-size:150%;">c#</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link" style="padding-top:30px"> <span class="skill-icon" style="color:#fff;">python</span> <span class="skill-name">python</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link" style="padding-top:30px"> <span class="skill-icon" style="color:#fff;">sparc</span> <span class="skill-name two-lines" style="font-size:90%">sparc assembly</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link" style="padding-top:30px"> <span class="skill-icon" style="font-size:120%; color:#fff;">mips</span> <span class="skill-name two-lines" style="font-size:90%">mips assembly</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-android fa-2x"></i> <span class="skill-name icon-one-line">android</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-html5 fa-2x"></i> <span class="skill-name icon-one-line" style="font-size:120%;">html5</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-css3 fa-2x"></i> <span class="skill-name icon-one-line" style="font-size:120%;">css3</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <span class="skill-icon" style="font-size:150%; color:#fff;">js</span> <span class="skill-name icon-one-line" style="font-size:90%">javascript</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <img alt="php" class="skill-icon" src="images/php-logo.png" style="width:80%; margin-top:-10px"> <span class="skill-name">php script</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <img alt="apache" class="skill-icon" src="images/apache-logo.png" style="width:75%;"> <span class="skill-name">apache server</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-database fa-2x"></i> <span class="skill-name" style="font-size:90%">sql database</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <img alt="aws" class="skill-icon" src="images/aws-logo.png" style="width:50%;"> <span class="skill-name" style="font-size:85%">amazon web services</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-linux fa-2x"></i> <span class="skill-name icon-one-line" style="font-size:120%;">linux</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-apple fa-2x"></i> <span class="skill-name icon-one-line" style="font-size:120%;">osx</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-windows fa-2x"></i> <span class="skill-name icon-one-line" style="font-size:90%;">windows</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-git fa-2x"></i> <span class="skill-name" style="font-size:75%">version control <br>(git, svn)</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <img alt="eclipse" class="skill-icon" src="images/eclipse-logo.png" style="width:40%;"> <span class="skill-name icon-one-line">eclipse</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <img alt="unity3d" class="skill-icon" src="images/unity3d-logo.png" style="width:40%;"> <span class="skill-name icon-one-line">unity3d</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <img alt="gdb" class="skill-icon" src="images/gdb-logo.png" style="width:70%; margin-top:-15px"> <span class="skill-name icon-one-line" style="font-size:120%;">gdb</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-float-shadow skills-link"> <i class="skill-icon fa fa-stack-exchange fa-2x"></i> <span class="skill-name two-lines" style="font-size:90%;">stack exchange</span> </div> </div> <div class="col-xs-1 skills-item"> <div class="hvr-pulse-grow skills-link skill-love"> <i class="skill-icon fa fa-heart fa-2x"></i> <span class="skill-name icon-one-line" style="color: #000; font-size: 120%"><b>love</b></span> </div> </div> </div> </div> </section> <!-- /skill overview --> https://jsfiddle.net/or10qmkk/
you had few issues way things setup, links instance had mad bleed off padding because never setup border-box heights varied. there set .skills-item inline block , set #skills div text-align center center them.
let me know in comments if have questions.
Comments
Post a Comment