having trouble with resizing when running on mobile. Elements in id="mustTake" are overlaying each other when in mobile. I am trying to achieve the same look as two elements on top when in mobile.
header {
background-color: #8FBCDB;
}
.container {
padding-top: 10px;
}
body {
background-color: #E0EEEE;
}
#profile {
position: absolute;
right: 7%;
top: 0%;
z-index: 1;
}
.panel .panel-info {
position: absolute;
z-index: 1;
}
.container h1 {
z-index: 1;
}
.myButton {
background-color: #44c767;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
border: 1px solid #18ab29;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Georgia;
font-size: 14px;
font-weight: bold;
padding: 4px 10px;
text-decoration: none;
text-shadow: 0px 1px 0px #2f6627;
}
.myButton:hover {
background-color: #5cbf2a;
}
.myButton:active {
position: relative;
top: 1px;
}
.myButton1 {
background-color: #FFA500;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
border-radius: 18px;
border: 1px solid #18ab29;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Georgia;
font-size: 19px;
font-weight: bold;
padding: 4px 10px;
text-decoration: none;
text-shadow: 0px 1px 0px #2f6627;
}
.myButton1:hover {
background-color: #EE9A00;
}
.myButton1:active {
position: relative;
top: 1px;
}
.table-striped tr {
font-size: 18px;
}
.table-striped th {
font-size: 20px;
}
.timeline {
list-style: none;
padding: 0;
position: relative
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: "";
width: 2px;
background-color: #fff;
left: 40px;
margin-left: -1.5px
}
.timeline>li {
margin-bottom: 50px;
position: relative;
min-height: 50px
}
.timeline>li:before,
.timeline>li:after {
content: " ";
display: table
}
.timeline>li:after {
clear: both
}
.timeline>li .timeline-panel {
width: 100%;
float: right;
padding: 0 20px 0 100px;
position: relative;
text-align: left
}
.timeline>li .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto
}
.timeline>li .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto
}
.timeline>li .timeline-image {
left: 0;
margin-left: 0;
width: 100px;
height: 80px;
position: absolute;
z-index: 100;
background-color: ;
color: #fff;
border-radius: 5%;
border: 7px solid #FFCC33;
text-align: center;
}
timeline>li .timeline-image1 {
left: 0;
margin-left: 0;
width: 100px;
height: 80px;
position: absolute;
z-index: 100;
background-color: ;
color: #fff;
border-radius: 5%;
border: 7px solid #f1f1f1;
text-align: center;
}
.timeline>li .timeline-image h4 {
font-size: 10px;
margin-top: 12px;
line-height: 14px;
}
.timeline>li.timeline-inverted>.timeline-panel {
float: right;
text-align: left;
padding: 0 20px 0 100px;
}
.timeline>li.timeline-inverted>.timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto
}
.timeline>li.timeline-inverted>.timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto
}
.timeline>li:last-child {
margin-bottom: 0
}
.timeline .timeline-heading h4 {
margin-top: 0;
color: inherit
}
.timeline .timeline-heading h4.subheading {
text-transform: none
}
.timeline .timeline-body>p,
.timeline .timeline-body>ul {
margin-bottom: 0
}
.timeline:before {
left: 50%
}
.timeline>li {
margin-bottom: 100px;
min-height: 100px
}
.timeline>li .timeline-panel {
width: 41%;
float: left;
padding: 0 20px 20px 30px;
text-align: right
}
.timeline>li .timeline-image {
width: 100px;
height: 100px;
left: 50%;
margin-left: -50px
}
.timeline>li .timeline-image h4 {
font-size: 13px;
margin-top: 16px;
line-height: 18px
}
.timeline>li.timeline-inverted>.timeline-panel {
float: right;
text-align: left;
padding: 0 30px 20px 20px
}
.timeline>li {
min-height: 170px
}
.timeline>li .timeline-panel {
padding: 0 20px 20px 100px
}
.timeline>li .timeline-image {
width: 270px;
height: 170px;
margin-left: -133px;
}
.timeline>li .timeline-image h4 {
margin-top: 40px
}
.timeline>li.timeline-inverted>.timeline-panel {
padding: 0 100px 20px 20px
}
.timeline>li .timeline-image {
color: black;
}
.timeline:before {
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advising WebApp</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<header>
<div class="container ">
<div class="well">
<div id="profile">
<b id="welcome"><i><?php echo $login_session; ?></i></b>
<b id="logout"> <span class="glyphicon glyphicon-log-out"></span> Log-out</b>
<!-- <b id="logout">Log Out</b> -->
</div>
<h1>Advising WebApp</h1>
<p> Web App that helps with advising of CS majors!</p>
</div>
</div>
</header>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<hr class="light">
</div>
</div>
<div class="row" id="about-affects">
<div class="col-lg-12">
<ul class="timeline">
<li>
<div class="timeline-image">
<h4>CPS210-CompSci-I </h4>
</div>
</li>
<li>
<div class="timeline-image">
<h4>CPS310-CompSci-II</h4>
</div>
</li>
</ul>
</div>
</div>
</div>
<section id="mustTake">
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-lg-12 text-center">
<h2 class="section-heading">MUST TAKE ALL</h2>
<hr class="primary">
</div>
<div class="col-xs-6 col-md-3">
<ul class="timeline">
<li>
<div class="timeline-image">
<h4>CPS210-CompSci-I </h4>
</div>
</li>
<li>
<div class="timeline-image">
<h4>CPS310-CompSci-II</h4>
</div>
</li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
<ul class="timeline">
<li>
<div class="timeline-image">
<h4>CPS210-CompSci-I </h4>
</div>
</li>
<li>
<div class="timeline-image">
<h4>CPS310-CompSci-II</h4>
</div>
</li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
<ul class="timeline">
<li>
<div class="timeline-image">
<h4>CPS210-CompSci-I </h4>
</div>
</li>
<li>
<div class="timeline-image">
<h4>CPS310-CompSci-II</h4>
</div>
</li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
<ul class="timeline">
<li>
<div class="timeline-image">
<h4>CPS210-CompSci-I </h4>
</div>
</li>
<li>
<div class="timeline-image">
<h4>CPS310-CompSci-II</h4>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<script src="../projectclass/js/main.js" type="text/javascript"></script>
</body>
</html>
The total of col-xs-* col-md-* col-sm-* must be 12 per class="row" you are exceding that number.
Try with this:
<section id="mustTake" >
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-lg-12 text-center">
<h2 class="section-heading">MUST TAKE ALL</h2>
<hr class="primary">
</div>
</div>
<!-- Mobile -->
<div class="row">
<div class="col-xs-6 hidden-md hidden-lg">
<ul class="timeline">
<li>
<div class="timeline-image">
<h4>CPS210-CompSci-I </h4>
</div>
</li>
<li>
<div class="timeline-image">
<h4>CPS310-CompSci-II</h4>
</div>
</li>
</ul>
</div>
<div class="col-xs-6 hidden-md hidden-lg">
<ul class="timeline">
<li>
<div class="timeline-image">
<h4>CPS210-CompSci-I </h4>
</div>
</li>
<li>
<div class="timeline-image">
<h4>CPS310-CompSci-II</h4>
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-6 hidden-md hidden-lg">
<ul class="timeline">
<li>
<div class="timeline-image">
<h4>CPS210-CompSci-I </h4>
</div>
</li>
<li>
<div class="timeline-image">
<h4>CPS310-CompSci-II</h4>
</div>
</li>
</ul>
</div>
<div class="col-xs-6 hidden-md hidden-lg">
<ul class="timeline">
<li>
<div class="timeline-image">
<h4>CPS210-CompSci-I </h4>
</div>
</li>
<li>
<div class="timeline-image">
<h4>CPS310-CompSci-II</h4>
</div>
</li>
</ul>
</div>
</div>
<!-- Desktop -->
<div class="row">
<div class="col-md-3 hidden-sm hidden-xs">
<ul class="timeline">
<li>
<div class="timeline-image">
<h4>CPS210-CompSci-I </h4>
</div>
</li>
<li>
<div class="timeline-image">
<h4>CPS310-CompSci-II</h4>
</div>
</li>
</ul>
</div>
<div class="col-md-3 hidden-sm hidden-xs">
<ul class="timeline">
<li>
<div class="timeline-image">
<h4>CPS210-CompSci-I </h4>
</div>
</li>
<li>
<div class="timeline-image">
<h4>CPS310-CompSci-II</h4>
</div>
</li>
</ul>
</div>
<div class="col-md-3 hidden-sm hidden-xs">
<ul class="timeline">
<li>
<div class="timeline-image">
<h4>CPS210-CompSci-I </h4>
</div>
</li>
<li>
<div class="timeline-image">
<h4>CPS310-CompSci-II</h4>
</div>
</li>
</ul>
</div>
<div class="col-md-3 hidden-sm hidden-xs">
<ul class="timeline">
<li>
<div class="timeline-image">
<h4>CPS210-CompSci-I </h4>
</div>
</li>
<li>
<div class="timeline-image">
<h4>CPS310-CompSci-II</h4>
</div>
</li>
</ul>
</div>
</div>
</div>
In your Id mustTake you have exceeded total numbers of cols per row (i.e. 12). For each row class you have 12 cols that you can use (Bootstrap grid system): http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
Related
So I've been trying to make my sidebar smaller so that I can make the article bigger, but when I did so it seemed to have displaced everything in the sidebar but I really don't see how. I'm relatively new to html and css so I'm not as experienced and would be really happy if someone could help.
Heres my code:
body {
margin: 0;
background: #fff;
font-family: wayward;
font-weight: 100;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
padding-top:110px;
max-width: 1600px; margin: auto
}h1 {
margin: 10px;
}
img {
max-width: 100%;
}
.review {
line-height: 29.25px;
padding-top: 5px;
text-align: center;
border-width: 1px;
margin: 10px;
padding: 5px;
word-wrap: break-word;
flex: 1;
}
.text-wrapper{
max-width:800px;
margin:auto;
}
aside .articles{
list-style-type: none;
padding: 0px;
margin-top:0px;
border-top:3px solid;
}
.articles > li.card{
border-left: 1px solid #55d6aa;
border-right: 1px solid #55d6aa;
border-bottom: 1px solid #55d6aa;
}
.articles h3, .articles p {
margin-top: 0px;
}
.articles .content_col{
margin-left: 10px;
}
.image_col{
width:180px;
height:180px;
}
.card{
height:150px;
}
.card-link{
/* remove deafult link color + underline */
color: #55d6aa;
text-decoration: none;
/* change a display from deafult inline to block (all card area is clickbale) */
display: block;
/* transition */
transition: background-color 0.5s ease;
/* flex setting */
display: flex;
align-items: center;
/* extra padding around the card */
padding: 10px;
}
.card-link:hover{
background: #f3f3f3;
}
button {
color: #55d6aa;
background: transparent;
border-width: 2px;
border-style: solid;
border-color: #55d6aa;
position: relative;
margin: 0px;
display: inline-block;
padding: 0.5em 1em;
transition: all 0.3s ease-in-out;
text-align: center;
font-weight: bold;
}
button:before,
button:after {
content: "";
display: block;
position: absolute;
border-color: #55d6aa;
box-sizing: border-box;
border-style: solid;
width: 1em;
height: 1em;
transition: all 0.3s ease-in-out;
}
button:before {
top: -6px;
left: -6px;
border-width: 2px 0 0 2px;
z-index: 5;
}
button:after {
bottom: -6px;
right: -6px;
border-width: 0 2px 2px 0;
}
button {
color: #55d6aa;
border-color: #55d6aa;
}
button:before,
button:after {
border-color: #55d6aa;
}
button:hover:before,
button:hover:after {
width: calc(100% + 12px);
height: calc(100% + 12px);
border-color: #55d6aa;
transform: rotateY(180deg);
}
button:hover {
color: #55d6aa;
background-color: transparent;
border-color: #55d6aa;
}
<aside>
<h2 style="padding:13px;">Most Popular Posts</h2>
<ul class="articles">
<!-- card 1 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/300" />
</div>
<div class="content_col">
<h3>Features</h3>
<p>Responsive Buttons!</p>
<button>Hover me</button>
</div>
</a>
</li>
<!-- card 2 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/301" />
</div>
<div class="content_col">
<h3>Auto NavBar</h3>
<p>Try scrolling up and down!</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 3 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/302" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 4 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/303" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 5 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/304" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 6 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/305" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 7 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/306" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
</ul>
</aside>
<div class="review">
<h1>Titanic Movie Review 1996</h1>
<h3>-By Some random guy</h3>
<div class = "thumbnail">
<img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2020/01/Rose-DeWitt-Bukater-and-Jack.png?q=50&fit=crop&w=767&h=450&dpr=1.5" alt="An Image of Jack holding rose from behind">
</div>
<div class = "text-wrapper">
<p>
paragraph here
</p>
</div>
</div>
Hi Just make a small change in your css
.image_col {
width: 180px;
height: auto;}
.card {
height: auto;}
When a new item I want handle the other items will have a distance similar to the new item, but only processed by css okay? If possible, I do not want to handle by adding the distance available for the item as this is in contravention of the design...................................................................
Thanks for your help!
.list_item_grid {
padding: 0 7px;
margin-bottom: 63px;
list-style: none;
}
.list_item_grid .item {
float: left;
width: calc(100%/4 - 2px);
margin-right: 2px;
margin-bottom: 7px;
}
.list_item_grid .item:last-child {
margin-right: 0;
}
.list_item_grid .thumb_img {
height: 180px;
position: relative;
overflow: hidden;
}
.list_item_grid img {
position: absolute;
width: auto;
max-height: 100%;
height: auto;
border: none;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.list_item_grid a {
text-decoration: none;
}
.list_item_grid .date {
padding: 9px 14px 3px;
color: #7b7b7b;
}
.list_item_grid .txt_link {
margin-top: 0;
padding: 0 22px 0 14px;
}
.list_item_grid a:hover .txt_link {
text-decoration: none;
color: #2b7bcd;
}
.list_item_grid li.new > p:first-child:before {
content: "NEW"
}
<ul class="list_item_grid clearfix">
<li class="item new">
<p></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
<li class="item">
<p></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
<li class="item">
<p></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
<li class="item">
<p></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
</ul>
Link code
I have Completed it, Check out this
Here i added the class name for the paragraphs, then i add some css code.
.list_item_grid {
padding: 0 7px;
margin-bottom: 63px;
list-style: none;
}
.list_item_grid .item {
float: left;
width: calc(100%/4 - 2px);
margin-right: 2px;
margin-bottom: 7px;
}
.list_item_grid .item:last-child {
margin-right: 0;
}
.list_item_grid .thumb_img {
height: 180px;
position: relative;
overflow: hidden;
}
.list_item_grid img {
position: absolute;
width: auto;
max-height: 100%;
height: auto;
border: none;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.list_item_grid a {
text-decoration: none;
}
.list_item_grid .date {
padding: 9px 14px 3px;
color: #7b7b7b;
}
.list_item_grid .txt_link {
margin-top: 0;
padding: 0 22px 0 14px;
}
.list_item_grid a:hover .txt_link {
text-decoration: none;
color: #2b7bcd;
}
.list_item_grid li.new > p:first-child:before {
content: "NEW"
}
.para{
height: 20px;
margin: 0px;
padding: 15px 0px;
}
<ul class="list_item_grid clearfix">
<li class="item new">
<p class="para"></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
<li class="item">
<p class="para"></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
<li class="item">
<p class="para"></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
<li class="item">
<p class="para"></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
</ul>
I have created a vertical timeline that needs to be changed completely into horizontal timeline I'm trying to get it horizontal but it doesn't work as expected.
Posted the complete CSS & HTML code also link to codepen of the current progress.
Also, the timeline needs to be responsive in horizontal view.
Link
https://codepen.io/anon/pen/yvPLrP
#Timline {
background-color: #FFFFFF;
}
.Timline-wrapper {
position: relative;
clear: both;
overflow: hidden;
}
.Timline-wrapper:nth-of-type(odd) .Timline-item {
padding-left: 100px;
padding-right: 0;
padding-bottom: 50px;
float: right;
}
.Timline-wrapper:nth-of-type(odd) .Timline-box:after {
left: -20px;
right: auto;
border-color: transparent;
text-align: left;
border-right: 10px solid #fff;
border-left-color: transparent !important;
}
.Timline-wrapper:nth-of-type(odd) .Timline-icon {
right: auto;
left: -32px;
}
.Timline-wrapper:nth-of-type(odd) .Timline-year {
text-align: right;
right: 140%;
left: auto;
}
.Timline-holder:before {
content: '';
position: absolute;
top: 0;
left: 50%;
margin-left: -4px;
height: 100%;
width: 4px;
background: #939393;
opacity: 0.5;
}
.Timline-item {
padding-right: 100px;
padding-bottom: 50px;
padding-top: 50px;
}
.Timline-year {
top: 40px;
position: absolute;
width: 100%;
left: 140%;
}
.Timline-year>* {
margin: 0;
}
.Timline-icon {
border-radius: 50%;
background: #fff;
position: absolute;
width: 60px;
height: 60px;
right: -28px;
top: 72px;
z-index: 9;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.3s ease-in-out;
}
.Timline-icon:before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.Timline-icon:hover {
color: #E3000F;
border: 2px solid #E3000F;
transform: translateY(-6px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
.Timline-box {
background-color: #fff;
padding: 15px;
position: relative;
}
.Timline-box h3,
.Timline-box h5 {
text-transform: capitalize;
}
.Timline-box:after {
content: "";
display: block;
position: absolute;
right: -20px;
top: 40px;
border: 10px solid transparent;
border-left: 10px solid #fff;
}
.Timline-box:hover {
cursor: pointer;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
.Timline-box:hover+.Timline-icon {
color: #E3000F;
border: 2px solid #E3000F;
transform: translateY(-6px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
.Timline-box {
background-color: #fff;
padding: 15px;
}
/* Timline Responsive */
#media (min-width: 992px) and (max-width: 1024px) {
.Timline-year {
left: 152%;
}
.Timline-wrapper:nth-of-type(odd) .Timline-year {
right: 152%;
}
}
#media (max-width: 768px) {
.Timline-item {
padding-right: 15px;
margin-left: 65px;
padding-top: 20px;
}
.Timline-holder:before {
left: 37px;
}
.Timline-icon {
left: -60px;
right: auto;
top: 42px;
}
.Timline-year {
position: relative;
top: 0;
left: 0;
}
.Timline-box:after {
left: -20px;
right: auto;
border-color: transparent;
text-align: left;
border-right: 10px solid #fff;
border-left-color: transparent !important;
}
.Timline-wrapper:nth-of-type(odd) .Timline-item {
padding-right: 15px;
padding-left: 15px;
margin-left: 65px;
float: none;
}
.Timline-wrapper:nth-of-type(odd) .Timline-icon {
left: -60px;
right: auto;
}
.Timline-wrapper:nth-of-type(odd) .Timline-year {
position: relative;
top: 0;
left: 0;
text-align: left;
}
}
<!-- Timline Section -->
<section id="Timline">
<div class="container">
<div class="section-content">
<div class="row">
<!-- Section Title -->
<div class="col-md-12 section-title text-center">
<span class="divider center"></span>
<h2>Timline</h2>
</div>
<!-- End of Section Title -->
<!-- Timline-1 -->
<div class="Timline-wrapper">
<div class="col-md-12 Timline-holder">
<div class="row">
<div class="col-md-6 col-sm-12 Timline-item">
<div class="Timline-box" data-aos="fade-right">
<h3>One</h3>
</div>
<i class=" Timline-icon fa fa-2x fa-paint-brush"></i>
</div>
</div>
</div>
</div>
<!-- End of Timline-1 -->
<!-- Timline-2 -->
<div class="Timline-wrapper">
<div class="col-md-12 Timline-holder">
<div class="row">
<div class="col-md-6 col-sm-12 Timline-item">
<div class=" Timline-box" data-aos="fade-right">
<h3>Two</h3>
</div>
<i class=" Timline-icon fa fa-2x fa-star"></i>
</div>
</div>
</div>
</div>
<!-- End of Timline-2 -->
<!-- Timline-3 -->
<div class="Timline-wrapper">
<div class="col-md-12 Timline-holder">
<div class="row">
<div class="col-md-6 col-sm-12 Timline-item">
<div class=" Timline-box" data-aos="fade-right">
<h3>Three</h3>
</div>
<i class=" Timline-icon fa fa-2x fa-lightbulb-o"></i>
</div>
</div>
</div>
</div>
<!-- End of Timline-3 -->
<!-- Timline-4 -->
<div class="Timline-wrapper">
<div class="col-md-12 Timline-holder">
<div class="row">
<div class="col-md-6 col-sm-12 Timline-item">
<div class=" Timline-box" data-aos="fade-right">
<h3>Four</h3>
</div>
<i class=" Timline-icon fa fa-2x fa-star"></i>
</div>
</div>
</div>
</div>
<!-- End of Timline-4 -->
<!-- Timline-5 -->
<div class="Timline-wrapper">
<div class="col-md-12 Timline-holder">
<div class="row">
<div class="col-md-6 col-sm-12 Timline-item">
<div class=" Timline-box" data-aos="fade-right">
<h3>Five</h3>
</div>
<i class=" Timline-icon fa fa-2x fa-paint-brush"></i>
</div>
</div>
</div>
</div>
<!-- End of Timline-5 -->
<!-- Timline-6 -->
<div class="Timline-wrapper">
<div class="col-md-12 Timline-holder">
<div class="row">
<div class="col-md-6 col-sm-12 Timline-item">
<div class=" Timline-box" data-aos="fade-right">
<h3>Six</h3>
</div>
<i class=" Timline-icon fa fa-2x fa-star"></i>
</div>
</div>
</div>
</div>
<!-- End of Timline-6 -->
<!-- Timline-7 -->
<div class="Timline-wrapper">
<div class="col-md-12 Timline-holder">
<div class="row">
<div class="col-md-6 col-sm-12 Timline-item">
<div class=" Timline-box" data-aos="fade-right">
<h3>Seven</h3>
</div>
<i class=" Timline-icon fa fa-2x fa-lightbulb-o"></i>
</div>
</div>
</div>
</div>
<!-- End of Timline-7 -->
<!-- Timline-8 -->
<div class="Timline-wrapper">
<div class="col-md-12 Timline-holder">
<div class="row">
<div class="col-md-6 col-sm-12 Timline-item">
<div class=" Timline-box" data-aos="fade-right">
<h3>Eight</h3>
</div>
<i class=" Timline-icon fa fa-2x fa-star"></i>
</div>
</div>
</div>
</div>
<!-- End of Timline-8 -->
<!-- Timline-9 -->
<div class="Timline-wrapper">
<div class="col-md-12 Timline-holder">
<div class="row">
<div class="col-md-6 col-sm-12 Timline-item">
<div class=" Timline-box" data-aos="fade-right">
<h3>Nine</h3>
</div>
<i class=" Timline-icon fa fa-2x fa-lightbulb-o"></i>
</div>
</div>
</div>
</div>
<!-- End of Timline-9 -->
</div>
</div>
</div>
</section>
<!-- End of Timline Section -->
You can modify this based on your requirement
/* Timeline */
.timeline,
.timeline-horizontal {
list-style: none;
padding: 20px;
position: relative;
}
.timeline:before {
top: 40px;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline .timeline-item {
margin-bottom: 20px;
position: relative;
}
.timeline .timeline-item:before,
.timeline .timeline-item:after {
content: "";
display: table;
}
.timeline .timeline-item:after {
clear: both;
}
.timeline .timeline-item .timeline-badge {
color: #fff;
width: 54px;
height: 54px;
line-height: 52px;
font-size: 22px;
text-align: center;
position: absolute;
top: 18px;
left: 50%;
margin-left: -25px;
background-color: #7c7c7c;
border: 3px solid #ffffff;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline .timeline-item .timeline-badge i,
.timeline .timeline-item .timeline-badge .fa,
.timeline .timeline-item .timeline-badge .glyphicon {
top: 2px;
left: 0px;
}
.timeline .timeline-item .timeline-badge.primary {
background-color: #1f9eba;
}
.timeline .timeline-item .timeline-badge.info {
background-color: #5bc0de;
}
.timeline .timeline-item .timeline-badge.success {
background-color: #59ba1f;
}
.timeline .timeline-item .timeline-badge.warning {
background-color: #d1bd10;
}
.timeline .timeline-item .timeline-badge.danger {
background-color: #ba1f1f;
}
.timeline .timeline-item .timeline-panel {
position: relative;
width: 46%;
float: left;
right: 16px;
border: 1px solid #c0c0c0;
background: #ffffff;
border-radius: 2px;
padding: 20px;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline .timeline-item .timeline-panel:before {
position: absolute;
top: 26px;
right: -16px;
display: inline-block;
border-top: 16px solid transparent;
border-left: 16px solid #c0c0c0;
border-right: 0 solid #c0c0c0;
border-bottom: 16px solid transparent;
content: " ";
}
.timeline .timeline-item .timeline-panel .timeline-title {
margin-top: 0;
color: inherit;
}
.timeline .timeline-item .timeline-panel .timeline-body>p,
.timeline .timeline-item .timeline-panel .timeline-body>ul {
margin-bottom: 0;
}
.timeline .timeline-item .timeline-panel .timeline-body>p+p {
margin-top: 5px;
}
.timeline .timeline-item:last-child:nth-child(even) {
float: right;
}
.timeline .timeline-item:nth-child(even) .timeline-panel {
float: right;
left: 16px;
}
.timeline .timeline-item:nth-child(even) .timeline-panel:before {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline-horizontal {
list-style: none;
position: relative;
padding: 20px 0px 20px 0px;
display: inline-block;
}
.timeline-horizontal:before {
height: 3px;
top: auto;
bottom: 26px;
left: 56px;
right: 0;
width: 100%;
margin-bottom: 20px;
}
.timeline-horizontal .timeline-item {
display: table-cell;
height: 280px;
width: 20%;
min-width: 320px;
float: none !important;
padding-left: 0px;
padding-right: 20px;
margin: 0 auto;
vertical-align: bottom;
}
.timeline-horizontal .timeline-item .timeline-panel {
top: auto;
bottom: 64px;
display: inline-block;
float: none !important;
left: 0 !important;
right: 0 !important;
width: 100%;
margin-bottom: 20px;
}
.timeline-horizontal .timeline-item .timeline-panel:before {
top: auto;
bottom: -16px;
left: 28px !important;
right: auto;
border-right: 16px solid transparent !important;
border-top: 16px solid #c0c0c0 !important;
border-bottom: 0 solid #c0c0c0 !important;
border-left: 16px solid transparent !important;
}
.timeline-horizontal .timeline-item:before,
.timeline-horizontal .timeline-item:after {
display: none;
}
.timeline-horizontal .timeline-item .timeline-badge {
top: auto;
bottom: 0px;
left: 43px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>Horizontal timeline</h1>
</div>
<div style="display:inline-block;width:100%;overflow-y:auto;">
<ul class="timeline timeline-horizontal">
<li class="timeline-item">
<div class="col-md-12 Timline-holder">
<div class="row">
<div class="col-md-6 col-sm-12 Timline-item">
<div class=" Timline-box" data-aos="fade-right">
<h3>One</h3>
</div>
<i class=" Timline-icon fa fa-2x fa-lightbulb-o"></i>
</div>
</div>
</div>
</li>
<li class="timeline-item">
<div class="col-md-12 Timline-holder">
<div class="row">
<div class="col-md-6 col-sm-12 Timline-item">
<div class=" Timline-box" data-aos="fade-right">
<h3>Two</h3>
</div>
<i class=" Timline-icon fa fa-2x fa-lightbulb-o"></i>
</div>
</div>
</div>
</li>
<li class="timeline-item">
<div class="col-md-12 Timline-holder">
<div class="row">
<div class="col-md-6 col-sm-12 Timline-item">
<div class=" Timline-box" data-aos="fade-right">
<h3>Three</h3>
</div>
<i class=" Timline-icon fa fa-2x fa-lightbulb-o"></i>
</div>
</div>
</div>
</li>
<li class="timeline-item">
<div class="col-md-12 Timline-holder">
<div class="row">
<div class="col-md-6 col-sm-12 Timline-item">
<div class=" Timline-box" data-aos="fade-right">
<h3>Four</h3>
</div>
<i class=" Timline-icon fa fa-2x fa-lightbulb-o"></i>
</div>
</div>
</div>
</li>
<li class="timeline-item">
<div class="col-md-12 Timline-holder">
<div class="row">
<div class="col-md-6 col-sm-12 Timline-item">
<div class=" Timline-box" data-aos="fade-right">
<h3>Five</h3>
</div>
<i class=" Timline-icon fa fa-2x fa-lightbulb-o"></i>
</div>
</div>
</div>
</li>
<li class="timeline-item">
<div class="col-md-12 Timline-holder">
<div class="row">
<div class="col-md-6 col-sm-12 Timline-item">
<div class=" Timline-box" data-aos="fade-right">
<h3>Six</h3>
</div>
<i class=" Timline-icon fa fa-2x fa-lightbulb-o"></i>
</div>
</div>
</div>
</li>
<li class="timeline-item">
<div class="col-md-12 Timline-holder">
<div class="row">
<div class="col-md-6 col-sm-12 Timline-item">
<div class=" Timline-box" data-aos="fade-right">
<h3>Seven
</h3>
</div>
<i class=" Timline-icon fa fa-2x fa-lightbulb-o"></i>
</div>
</div>
</div>
</li>
<li class="timeline-item">
<div class="col-md-12 Timline-holder">
<div class="row">
<div class="col-md-6 col-sm-12 Timline-item">
<div class=" Timline-box" data-aos="fade-right">
<h3>Eight</h3>
</div>
<i class=" Timline-icon fa fa-2x fa-lightbulb-o"></i>
</div>
</div>
</div>
</li>
<li class="timeline-item">
<div class="col-md-12 Timline-holder">
<div class="row">
<div class="col-md-6 col-sm-12 Timline-item">
<div class=" Timline-box" data-aos="fade-right">
<h3>Nine</h3>
</div>
<i class=" Timline-icon fa fa-2x fa-lightbulb-o"></i>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
I wanted to create a centered social bar, here the code:
HTML&CSS:
.social-detail {
color:#fff;
font-family: ProximaNovabold;
}
.icon-social {
height: 50px;
width: 208px;
background: url(../../images/contact.png) center center no-repeat;
float: left;
}
#social {
padding: 0px 0px 2px 0px;
float: center;
}
#social li {
height: 42px;
padding: 2px 0px;
float: left;
}
#social .social-icon {
float: left;
cursor: pointer;
}
.social-info {
font-size: 14px;
color: #fff;
line-height: 36px;
padding-left: 50px;
padding-right: 10px;
width: 198px;
text-align: left;
font-family: ProximaNovabold;
}
<div class="social">
<ul id="social">
<li>
<div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/phone.png" title="" alt=""></div>
<div class="social-info">
<div class="social-detail">+123 456 789</div>
</div>
</li>
<li>
<div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/bbm.png" title="" alt=""></div>
<div class="social-info">
<div class="social-detail">1A2B3C4D</div>
</div>
</li>
<li>
<div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/yahoo.png" title="" alt=""></div>
<div class="social-info">
<div class="social-detail">rakensu</div>
</div>
</li>
<li>
<div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/skypee.png" title="" alt=""></div>
<div class="social-info">
<div class="social-detail">rakensu</div>
</div>
</li>
<li>
<div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/facebook.png" title="" alt=""></div>
<div class="social-info">
<div class="social-detail">rakensu</div>
</div>
</li>
</ul>
</div>
and here the result:
I think you can solve giving a fixed width, padding: 0 and margin: 0 auto
ul#social {
width: 1000px;
padding: 0;
margin: 0 auto
}
you can change the width to fit the icons...
delete the float: center property, it doesn't exist...
Wrap your icons in a div thats is not affected by your background image:
<div class="social">
<div id="centeringdiv">
<ul id="social">
</ul>
</div>
</div>
and set that new div to "center"
#centeringdiv {
margin: 0 auto;
}
The bootstrap social media buttons were showing and now they aren't and I don't know why. Any ideas?
Also when I click the contact button on the menu, the point it jumps to is not lined up with the start of the contact section, it was previously working like the rest of the sections and I can't figure that out either.
link to the code pen
.navbar {
background-color: black;
}
.navbar ul li a {
color: #fff !important;
font-size: 15px;
}
.navbar ul li a:hover {
background-color: #fff !important;
color: black !important;
}
.navbar-brand {
color: #fff !important;
font-size: 20px;
}
/***** HOME *****/
#home {
background: url("http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg") no-repeat center center fixed;
background-size: cover;
height: 680px;
}
.home-wrap {
padding-top: 140px;
}
.home-header {
font-family: 'Lobster';
font-size: 80px;
color: #fff;
}
h2 {
font-family: 'Lobster';
font-size: 60px;
color: #fff;
}
.home-line {
border: 0;
height: 3px;
width: 90%;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 153, 0, 1), rgba(0, 0, 0, 0));
}
.btn {
margin: 10px;
width: 80px;
border-radius: 5px;
background-color: black;
color: #fff;
border: none;
font-size: 20px;
}
.btn:hover {
background-color: silver;
color: black;
}
/***** ABOUT *****/
#about{
background-color: white;
padding-bottom: 80px;
}
.about-wrap {
width: 80%;
margin: auto;
margin-top: 95px;
}
h3 {
width: 80%;
margin: 0 auto;
font-size: 3em;
text-transform: uppercase;
text-align: center;
border-bottom: ;
padding: 0.2em;
}
.about-line {
background-color: black;
border: none;
height: 2px;
width: 40%;
}
.align {
width: 80%;
margin: 2em auto;
text-align: center;
}
.imga {
width: 120px;
height: 120px;
padding: 20px;
}
/***** PORTFOLIO *****/
#portfolio {
padding-top: 30px;
padding-bottom: 40px;
background-color: #EEDFCC;
}
.portfolio-header {
font-size: 3em;
color: #000;
}
.portfolio-line {
background-color: black;
border: none;
height: 2px;
width: 40%;
}
.placeholder-item {
margin-top: 40px;
text-align: center;
overflo: hidden;
}
.placeholder-desc {
margin-top: 10px;
font-size: 16px;
color: #000;
}
.imgp {
border: 1px solid black;
border-radius: 5px;
width: 100%;
}
.divider {
background-color: black;
height: 3px;
}
/***** CONTACT *****/
#contact {
background-color: white;
padding-top: 10px;
padding-bottom: 65px;
}
.contact-wrap {
margin-top: 60px;
}
.contact-header {
font-family: "Oswald";
color: #000;
font-size: 40px;
}
.contact-line {
background-color: black;
border: none;
height: 2px;
width: 40%;
}
.contact-wrap {
margin-top: 60px;
}
form {
margin-top: 50px;
}
input {
width: 40%;
height: 30px;
margin: 10px;
}
#message {
width: 40%;
height: 200px;
margin-top: 10px;
}
#submit-button {
widh: 10%;
height: 40px;
}
/***** FOOTER *****/
footer {
background-color: black;
height: 40px;
}
.footer-menu {
margin-left: -30px;
}
.footer-menu li {
display: inline;
margin: 10px;
}
.footer-menu li a {
text-decoration: none;
color: #fff;
font-size: 17px;
}
.footer-menu li {
display: inline;
margin: 10px;
}
.footer-menu li a {
text-decoration: none;
color: #fff;
font-size: 17px;
}
<head>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald|PT+Serif' rel='stylesheet' type='text/css'>
</head>
<!-- Navigation bar with the help of bootstrap -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Portfolio 1st Attempt</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div id="home">
<div class="home-wrap text-center">
<h1 class="home-header">Personal Portfolio Webpage</h1>
<h2>Social Media links</h2>
<hr class="home-line">
<div>
<a class="btn btn-default" type="button" href="#"><i class="fa fa-twitter"></i></a>
<i class="fa fa-linkedin"></i>
<i class="fa fa-github"></i>
<i class="fa fa-fire"></i>
</div>
</div>
</div>
<div id="about">
<div class="container">
<div class="about-wrap text-center">
<h3>Skills</h3>
<hr class="about-line">
<div class="align">
<div class="row">
<div class="col-xs-6 col-sm-3">
<img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/html_u7horu.png" alt="HTML5">
</div>
<div class="col-xs-6 col-sm-3">
<img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/css3_v0rzyx.png" alt="CSS3">
</div>
<div class="col-xs-6 col-sm-3">
<img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679097/rails_jusgqs.png" alt="Rails">
</div>
<div class="col-xs-6 col-sm-3">
<img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/javascript_a2cxa4.png" alt="Javascript" >
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3">
<img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/jQuery_uy0yu0.gif" alt="jQuery">
</div>
<div class="col-xs-6 col-sm-3">
<img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679097/ruby_t0scub.png" alt="Ruby">
</div>
<div class="col-xs-6 col-sm-3">
<img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/bootstrap_xfpqre.png" alt="Bootstrap">
</div>
<div class="col-xs-6 col-sm-3">
<img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679097/sql_mnbnrc.png" alt="SQL">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="portfolio">
<div class="container">
<h1 class="portfolio-header text-center">PORTFOLIO</h1>
<hr class="portfolio-line">
<div class="placeholder-box">
<div class="row">
<div class="col-md-4">
<div class="placeholder-item">
<img class="imgp" src="https://placehold.it/350x150" alt="project">
<p class="placeholder-desc"> Placeholder</p>
</div>
</div>
<div class="col-md-4">
<div class="placeholder-item">
<img class="imgp" src="https://placehold.it/350x150" alt="project">
<p class="placeholder-desc"> Placeholder</p>
</div>
</div>
<div class="col-md-4">
<div class="placeholder-item">
<img class="imgp" src="https://placehold.it/350x150" alt="project">
<p class="placeholder-desc"> Placeholder</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="placeholder-item">
<img class="imgp" src="https://placehold.it/350x150" alt="project">
<p class="placeholder-desc"> Placeholder</p>
</div>
</div>
<div class="col-md-4">
<div class="placeholder-item">
<img class="imgp" src="https://placehold.it/350x150" alt="project">
<p class="placeholder-desc"> Placeholder</p>
</div>
</div>
<div class="col-md-4">
<div class="placeholder-item">
<img class="imgp" src="https://placehold.it/350x150" alt="project">
<p class="placeholder-desc"> Placeholder</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div id="contact">
<div class="container">
<div class="contact-wrap text-center">
<h1 class="contact-header">CONTACT</h1>
<hr class="contact-line">
<form method="post" action="#">
<div class="row">
<div class="col-md-12">
<input type="text" id="name" name="name" required="required" placeholder="Enter your name here"/>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="email" id="email" name="email" placeholder="yourname#example.com" required="required"/>
</div>
</div>
<div class="row">
<div class="col-md-12">
<textarea id="message" name="message" required="required" data-minlength="20"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" value="Submit" class="btn btn-default" id="submit-button" />
</div>
</div>
</form>
</div>
</div>
</div>
<footer>
<ul class="footer-menu">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</footer>
Help much appreciated,
Thanks,
Rob
you forget add font-awesome css
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
https://codepen.io/anon/pen/dXEjbB?editors=1100