I'm trying to make a responsive timeline, and I used overflow-x so that you can't scroll horizontally, which was possible in my mobile version, thus leaving your burgermenu's children visible without actually clicking on it. However, this cut in half the circles on my timeline and I am unsure how to make it so that I can have full circles while preventing the ability to scroll horizontally. Is there any solution to this?
*{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
overflow-x: hidden;
}
.CV{
width: 80%;
margin: auto;
padding-top: 20px;
padding-bottom: 30px;
}
.sub-header{
height: 50vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(assets/cv-sub.jpg);
background-position: center;
background-size: cover;
text-align: center;
color: #fff;
}
.sub-header h1{
margin-top: 50px;
}
.timeline{
position: relative;
margin: 50px auto;
padding: 40px 0;
width:100%;
}
.timeline:before{
content: '';
position: absolute;
left: 50%;
width: 2px;
height: 100%;
background: #c5c5c5;
}
.timeline ul{
margin: 0;
padding:0;
}
.timeline ul li{
list-style: none;
position: relative;
width: 50%;
padding: 20px 40px;
box-sizing: border-box;
}
.timeline ul li:nth-child(odd){
float: left;
text-align: right;
clear: both;
}
.timeline ul li:nth-child(even){
float: right;
text-align: left;
clear: both;
}
.content{
padding-bottom: 20px;
}
.timeline ul li:nth-child(odd):before{
content: '';
position: absolute;
top: 24px;
right: -6px;
width: 10px;
height: 10px;
background: #f44336;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}
.timeline ul li:nth-child(even):before{
content: '';
position: absolute;
top: 28px;
left: -4px;
width: 10px;
height: 10px;
background: #f44336;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}
.timeline ul li h3{
margin: 0;
padding: 0;
font-weight: 600;
color: #f44336;
}
.timeline ul li p{
margin: 10px 0 0;
padding: 0;
}
.time{
color: #808080;
}
.CV, .timeline {
overflow-y:hidden;
}
#media(max-width: 700px){
.sub-header{
height: 35vh!important;
}
.timeline:before{
left: 20px;
}
.timeline ul li{
width: 100%;
padding-left: 50px;
padding-right: 25px;
}
.timeline ul li:nth-child(odd){
float: right;
text-align: left;
clear: both;
}
.timeline ul li:nth-child(even):before{
left: 16px;
z-index: 1;
}
.timeline ul li:nth-child(odd):before{
left: 16px;
z-index: 1;
}
.content h3{
font-size: 14px;
}
.content h4{
font-size: 14px;
}
.content p{
font-size: 14px;
}
.time p{
font-size: 14px;
}
}
<section class="CV">
<div class="timeline">
<ul>
<li>
<div class="content">
<h3>IXD Graduate Student
</h3>
<h4>#Pratt Institute<br>New York City, NY, United States
</h4>
<p>M.S. Interaction Experience Design
</p>
</div>
<div class="time">
<p>Aug 2021 - present
</p>
</div>
</li>
<li>
<div class="content">
<h3>Autopilot Data Analyst
</h3>
<h4>#Tesla<br>San Mateo, CA, United States
</h4>
<p>Utilized the Autopilot labeling interface to train Tesla's deep neural network using image recognition and classification to achieve Full Self Driving
</p>
</div>
<div class="time">
<p>Jan 2021 - Aug 2021
</p>
</div>
</li>
<li>
<div class="content">
<h3>Magna Cum Laude
</h3>
<h4>#UC Davis<br>Davis, CA, United States
</h4>
<p>B.A. Communications<br>B.A. Japanese
</p>
</div>
<div class="time">
<p>Sep 2017 - Dec 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Administrative Assistant &<br>English Second Language Teacher
</h3>
<h4>#LeafCup English Cafe and School<br>Tokyo, Japan
</h4>
<p> Checked-in customers, handled payroll activities, conducted language proficiency tests, and advertised events and promotions<br><br>Facilitated small group discussions with university students, businesspersons, retirees, etc. to develop basic speaking/listening English skills
</p>
</div>
<div class="time">
<p>Dec 2019 - Apr 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Content Curator
</h3>
<h4>#TOKI<br>Tokyo, Japan
</h4>
<p>Researched, edited, and built content for the Itinerary Builder database and translated text projects and website content from Japanese to English
</p>
</div>
<div class="time">
<p>Nov 2019 - Dec 2019
</p>
</div>
</li>
<li>
<div class="content">
<h3>Study Abroad in Japan
</h3>
<h4>#Keio University<br>Tokyo, Japan
</h4>
<p>Concentration in International Business &<br> Intercultural Communication
</p>
</div>
<div class="time">
<p>Sep 2019 - Apr 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Advertising & Web Graphic Designer
</h3>
<h4>#TOKI<br>Tokyo, Japan
</h4>
<p>Drafted UXUI designs for an optimized module for itinerary and curation proposals and led content curation procedures<br><br>Coordinated with department managers and engineering team to plan marketing campaign timelines and internal materials
</p>
</div>
<div class="time">
<p>June 2019 - Aug 2019
</p>
</div>
</li>
</ul>
<div style="clear: both;">
</div>
</div>
</section>
<!--Javascript for Toggle Menu-->
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
</html>
you should add CSS display: inline-table to CSS selector .timeline ul li to display the red midpoint.
if you don't want overflow-y: hidden; on .CV, .timeline, you can delete it, but you should remove padding: 40px 0; on .timeline.
You can use this code:
*{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
overflow-x: hidden;
}
.CV{
width: 80%;
margin: auto;
padding-top: 20px;
padding-bottom: 30px;
}
.sub-header{
height: 50vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(assets/cv-sub.jpg);
background-position: center;
background-size: cover;
text-align: center;
color: #fff;
}
.sub-header h1{
margin-top: 50px;
}
.timeline{
position: relative;
margin: 50px auto;
padding: 40px 0;
width:100%;
}
.timeline:before{
content: '';
position: absolute;
left: 50%;
width: 2px;
height: 100%;
background: #c5c5c5;
}
.timeline ul{
margin: 0;
padding:0;
}
.timeline ul li{
list-style: none;
position: relative;
width: 50%;
padding: 20px 40px;
box-sizing: border-box;
display: inline-table;
}
.timeline ul li:nth-child(odd){
float: left;
text-align: right;
clear: both;
}
.timeline ul li:nth-child(even){
float: right;
text-align: left;
clear: both;
}
.content{
padding-bottom: 20px;
}
.timeline ul li:nth-child(odd):before{
content: '';
position: absolute;
top: 24px;
right: -6px;
width: 10px;
height: 10px;
background: #f44336;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}
.timeline ul li:nth-child(even):before{
content: '';
position: absolute;
top: 28px;
left: -4px;
width: 10px;
height: 10px;
background: #f44336;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}
.timeline ul li h3{
margin: 0;
padding: 0;
font-weight: 600;
color: #f44336;
}
.timeline ul li p{
margin: 10px 0 0;
padding: 0;
}
.time{
color: #808080;
}
.CV, .timeline {
overflow-y:hidden;
}
#media(max-width: 700px){
.sub-header{
height: 35vh!important;
}
.timeline:before{
left: 20px;
}
.timeline ul li{
width: 100%;
padding-left: 50px;
padding-right: 25px;
display: inline-table;
}
.timeline ul li:nth-child(odd){
float: right;
text-align: left;
clear: both;
}
.timeline ul li:nth-child(even):before{
left: 16px;
z-index: 1;
}
.timeline ul li:nth-child(odd):before{
left: 16px;
z-index: 1;
}
.content h3{
font-size: 14px;
}
.content h4{
font-size: 14px;
}
.content p{
font-size: 14px;
}
.time p{
font-size: 14px;
}
}
<section class="CV">
<div class="timeline">
<ul>
<li>
<div class="content">
<h3>IXD Graduate Student
</h3>
<h4>#Pratt Institute<br>New York City, NY, United States
</h4>
<p>M.S. Interaction Experience Design
</p>
</div>
<div class="time">
<p>Aug 2021 - present
</p>
</div>
</li>
<li>
<div class="content">
<h3>Autopilot Data Analyst
</h3>
<h4>#Tesla<br>San Mateo, CA, United States
</h4>
<p>Utilized the Autopilot labeling interface to train Tesla's deep neural network using image recognition and classification to achieve Full Self Driving
</p>
</div>
<div class="time">
<p>Jan 2021 - Aug 2021
</p>
</div>
</li>
<li>
<div class="content">
<h3>Magna Cum Laude
</h3>
<h4>#UC Davis<br>Davis, CA, United States
</h4>
<p>B.A. Communications<br>B.A. Japanese
</p>
</div>
<div class="time">
<p>Sep 2017 - Dec 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Administrative Assistant &<br>English Second Language Teacher
</h3>
<h4>#LeafCup English Cafe and School<br>Tokyo, Japan
</h4>
<p> Checked-in customers, handled payroll activities, conducted language proficiency tests, and advertised events and promotions<br><br>Facilitated small group discussions with university students, businesspersons, retirees, etc. to develop basic speaking/listening English skills
</p>
</div>
<div class="time">
<p>Dec 2019 - Apr 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Content Curator
</h3>
<h4>#TOKI<br>Tokyo, Japan
</h4>
<p>Researched, edited, and built content for the Itinerary Builder database and translated text projects and website content from Japanese to English
</p>
</div>
<div class="time">
<p>Nov 2019 - Dec 2019
</p>
</div>
</li>
<li>
<div class="content">
<h3>Study Abroad in Japan
</h3>
<h4>#Keio University<br>Tokyo, Japan
</h4>
<p>Concentration in International Business &<br> Intercultural Communication
</p>
</div>
<div class="time">
<p>Sep 2019 - Apr 2020
</p>
</div>
</li>
<li>
<div class="content">
<h3>Advertising & Web Graphic Designer
</h3>
<h4>#TOKI<br>Tokyo, Japan
</h4>
<p>Drafted UXUI designs for an optimized module for itinerary and curation proposals and led content curation procedures<br><br>Coordinated with department managers and engineering team to plan marketing campaign timelines and internal materials
</p>
</div>
<div class="time">
<p>June 2019 - Aug 2019
</p>
</div>
</li>
</ul>
<div style="clear: both;">
</div>
</div>
</section>
<!--Javascript for Toggle Menu-->
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
</html>
Havent touched html/css in years so I need some help. I have a nested list, and want to style the outer list (#todo), and just have 'normal' bullets on the inside list (#task). Problem is when I style the outer list it automatically styles the inside list as well. As a rigged fix, i thought of removing the li tags from and just making them <p> and somehow add a bullet to the front of them. How do you add bullets to the front of <p> tag?
#parent .todo ul li:before{
content: "";
position: absolute;
top: 5px;
left: -25px;
width: 6px;
height: 6px;
border-radius: 50%;
border: 2px solid #0bb5f4;
}
#parent .todo ul li:after{
content: "";
position: absolute;
top: 14px;
left: -21px;
width: 2px;
height: 75px;
background: #0bb5f4
}
.task{
padding-left: 25px;
}
<div class="todo">
<div class="title">
<p class="bold">Title1</p>
</div>
<ul>
<li>
<div class="date">today</div>
<div class="info">
<p class="semi-bold">Name</p>
<p class="description"><em>location</em></p>
<div class="task">
<p>task1</p>
<p>task2</p>
<p>task3</p>
</div>
</div>
</li>
<li>
<div class="date">yesterday</div>
<div class="info">
<p class="semi-bold">Name2</p>
<p class="description"><em>location2</em></p>
<div class="task">
<p>item1</p>
<p>item2</p>
<p>item3</p>
</div>
</div>
</li>
</ul>
</div>
Add a class on the li elements of the outer list and apply the styles you want to apply on the outer list, on this class. This way, inner list's li elements won't be styled.
.outer-li {
position: relative;
list-style: none;
margin: 10px 0 0 0;
}
.outer-li::before {
content: "";
position: absolute;
top: 5px;
left: -25px;
width: 6px;
height: 6px;
border-radius: 50%;
border: 2px solid #0bb5f4;
}
.outer-li::after {
content: "";
position: absolute;
top: 14px;
left: -21px;
width: 2px;
height: 75px;
background: #0bb5f4
}
<div class="todo">
<div class="title">
<p class="bold">Title1</p>
</div>
<ul class="outer">
<li class="outer-li">
<div class="date">today</div>
<div class="info">
<p class="semi-bold">Name</p>
<p class="description"><em>location</em></p>
<ul class="task">
<li>task1</li>
<li>task2</li>
<li>task3</li>
</ul>
</div>
</li>
<li class="outer-li">
<div class="date">yesterday</div>
<div class="info">
<p class="semi-bold">Name2</p>
<p class="description"><em>location2</em></p>
<ul class="task">
<li>task1</li>
<li>task2</li>
<li>task3</li>
</ul>
</div>
</li>
</ul>
</div>
Alternatively, you could use ::before pseudo selector.
li {
position: relative;
list-style: none;
margin: 10px 0 0 0;
}
li::before {
content: "";
position: absolute;
top: 5px;
left: -25px;
width: 6px;
height: 6px;
border-radius: 50%;
border: 2px solid #0bb5f4;
}
li::after {
content: "";
position: absolute;
top: 14px;
left: -21px;
width: 2px;
height: 75px;
background: #0bb5f4
}
.task {
padding-left: 25px;
}
.task p {
position: relative;
}
.task p::before {
content: '';
position: absolute;
background: #222;
width: 5px;
height: 5px;
left: -13px;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
}
<div class="todo">
<div class="title">
<p class="bold">Title1</p>
</div>
<ul>
<li>
<div class="date">today</div>
<div class="info">
<p class="semi-bold">Name</p>
<p class="description"><em>location</em></p>
<div class="task">
<p>task1</p>
<p>task2</p>
<p>task3</p>
</div>
</div>
</li>
</ul>
</div>
What is the correct way of resizing divs with text in it? I use the code below, but it leaves me with noticeable font distortion when resizing. Its kinda like the font has changed during animation. Also there is a flicker inside the circles. The effect isn't really visible on OSX, but it is on windows machines. How do I fix it?
.content-no-btn {
transition: all .2s ease-in-out;
}
.content-no-btn:hover {
transform: scale(1.05);
}
.entry-content {
border-style: solid;
border-color: #bbb;
border-width: 0px 3px 3px 3px;
padding-top: 20px;
}
#price {
text-align: center;
}
.plan {
display: inline-block;
margin: 10px 1%;
font-family: 'Lato', Arial, sans-serif;
}
.plan-inner {
background: #fff;
margin: 0 auto;
min-width: 280px;
max-width: 100%;
position: relative;
}
.entry-title {
background: #53CFE9;
height: 140px;
position: relative;
text-align: center;
color: #fff;
margin-bottom: 0px;
}
.entry-title>h3 {
background: #20BADA;
font-size: 20px;
padding: 5px 0;
text-transform: uppercase;
font-weight: 700;
margin: 0;
}
.entry-title .price {
position: absolute;
bottom: -25px;
background: #20BADA;
height: 95px;
width: 95px;
margin: 0 auto;
left: 0;
right: 0;
overflow: hidden;
border-radius: 50px;
border: 4px solid #fff;
line-height: 80px;
font-size: 23px;
font-weight: 700;
}
.price span {
position: absolute;
font-size: 8px;
bottom: -10px;
left: 30px;
font-weight: 400;
}
.entry-content {
color: #323232;
padding-top: 20px;
}
.entry-content ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.entry-content li {
border-bottom: 1px solid #E5E5E5;
padding: 10px 0;
}
.entry-content li:last-child {
border: none;
}
.btn {
padding: 5em 0 5em 0;
text-align: center;
}
.btn a {
background: #323232;
padding: 10px 30px;
color: #fff;
text-transform: uppercase;
font-weight: 700;
text-decoration: none
}
.hot {
position: absolute;
top: -7px;
background: #F80;
color: #fff;
text-transform: uppercase;
z-index: 2;
padding: 2px 5px;
font-size: 9px;
border-radius: 2px;
right: 10px;
font-weight: 700;
}
.basic .entry-title {
background: #f37920;
}
.basic .entry-title > h3 {
background: #E7680C;
}
.basic .price {
background: #f37920;
}
.standard .entry-title {
background: #4484c1;
}
.standard .entry-title > h3 {
background: #3772aa;
}
.standard .price {
background: #3772aa;
}
.ultimite .entry-title > h3 {
background: #DD4B5E;
}
.ultimite .entry-title {
background: #F75C70;
}
.ultimite .price {
background: #DD4B5E;
}
.gratitude {
padding: 5em 20px 5em 20px;
height: 300px;
text-align: center;
background-color: #f8f9f9;
}
.orderDetailsContent {
max-width: 800px;
text-align: center;
display: table;
position: relative;
margin: auto;
}
<div id="price">
<!--price tab-->
<div class="plan">
<div class="plan-inner">
<div class="content-no-btn">
<div class="entry-title first-entry-title">
<h3>WHATUP </h3>
<div class="price">$0.99<span></span>
</div>
</div>
<div class="entry-content first-entry-content">
<ul>
<li><strong>SOME text here</strong></li>
<li><strong>and here too</strong> really</li>
<li><strong>and here too</strong> Effective</li>
<li><strong>HEHE</strong> and here too</li>
</ul>
</div>
</div>
<div class="btn">
Order Now
</div>
</div>
</div>
<!-- end of price tab-->
<!--price tab-->
<div class="plan basic">
<div class="plan-inner">
<div class="content-no-btn">
<div class="entry-title">
<h3>YEAH </h3>
<div class="price">$1.99<span></span>
</div>
</div>
<div class="entry-content">
<ul>
<li><strong>SOME text here</strong></li>
<li><strong>and here too</strong> really</li>
<li><strong>and here too</strong> Effective</li>
<li><strong>HEHE</strong> and here too</li>
</ul>
</div>
</div>
<div class="btn">
Order Now
</div>
</div>
</div>
<!-- end of price tab-->
<!--price tab-->
<div class="plan standard">
<div class="plan-inner">
<div class="content-no-btn">
<div class="hot">hot</div>
<div class="entry-title">
<h3>Superduper</h3>
<div class="price">$2.99<span></span>
</div>
</div>
<div class="entry-content">
<ul>
<li><strong>SOME text here</strong></li>
<li><strong>and here too</strong> really</li>
<li><strong>and here too</strong> Effective</li>
<li><strong>HEHE</strong> and here too</li>
</ul>
</div>
</div>
<div class="btn">
Order Now
</div>
</div>
</div>
<!-- end of price tab-->
<!--price tab-->
<div class="plan ultimite">
<div class="plan-inner">
<div class="content-no-btn">
<div class="entry-title">
<h3>JustGreat</h3>
<div class="price">$3.99<span></span>
</div>
</div>
<div class="entry-content">
<ul>
<li><strong>SOME text here</strong></li>
<li><strong>and here too</strong> really</li>
<li><strong>and here too</strong> Effective</li>
<li><strong>HEHE</strong> and here too</li>
</ul>
</div>
</div>
<div class="btn">
Order Now
</div>
</div>
</div>
<!-- end of price tab-->
</div>
<div class="gratitude"></div>
Scale transformations of such a small percentage are notorious for this. The only way around it is better browsers.
Instead, consider a translate animation with a whole number of pixels, perhaps upwards. You can also get some scale effect by setting position:relative on .content-no-btn then adding an absolutely positioned ::before with 100% width and height, and scaling only that pseudo-element on hover.
I am creating a Bootstrap timeline and it is working fine in mobile or small screen devices. But it has some problems in larger screen devices. Check it out at https://codepen.io/irshad437/pen/rLvxxa. And try resizing your windows to check its functionality. It should work same as in mobile devices.Kindly check it on codepen.(On given link)
Code:
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-body">
<ul class="timeline">
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="fa fa-credit-card"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="fa fa-credit-card"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="fa fa-credit-card"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="fa fa-credit-card"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="fa fa-credit-card"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="fa fa-credit-card"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="fa fa-credit-card"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="fa fa-credit-card"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="fa fa-credit-card"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="fa fa-credit-card"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
</div>
</li>
</ul>
</div>
<!-- /.panel-body -->
</div>
CSS:
/* Timeline.css */
.timeline {
position: relative;
padding: 20px 0 20px;
list-style: none;
}
.timeline:before {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 40px;
width: 8px;
margin-left: -1.5px;
background-color: #cccccc;
}
.timeline > li {
position: relative;
margin-bottom: 20px;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
float: left;
position: relative;
width: 46%;
padding: 30px 30px 20px 0px;
}
.timeline > li > .timeline-panel:before {
content: " ";
display: inline-block;
position: absolute;
top: 26px;
right: -15px;
}
.timeline > li > .timeline-panel:after {
content: "";
display: inline-block;
position: absolute;
top: 27px;
right: -14px;
border-top: 14px solid transparent;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
border-left: 14px solid #fff;
}
.timeline > li > .timeline-badge {
z-index: 100;
position: absolute;
top: 16px;
left: 17px;
width: 50px;
height: 50px;
margin-left: 0px;
border-radius: 50% 50% 50% 50%;
text-align: center;
font-size: 1.4em;
line-height: 50px;
color: #fff;
background-color: #999999;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
right: auto;
left: -15px;
border-right-width: 15px;
border-left-width: 0;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
right: auto;
left: -14px;
border-right-width: 14px;
border-left-width: 0;
}
.timeline-badge.primary {
background-color: #2e6da4 !important;
}
.timeline-badge.success {
background-color: #3f903f !important;
}
.timeline-badge.warning {
background-color: #f0ad4e !important;
}
.timeline-badge.danger {
background-color: #d9534f !important;
}
.timeline-badge.info {
background-color: #5bc0de !important;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
#media(max-width:767px) {
ul.timeline:before {
left: 40px;
}
ul.timeline > li > .timeline-panel {
width: calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
}
ul.timeline > li > .timeline-badge {
top: 16px;
left: 17px;
margin-left: 0;
}
ul.timeline > li > .timeline-panel {
float: right;
}
ul.timeline > li > .timeline-panel:before {
right: auto;
left: -15px;
border-right-width: 15px;
border-left-width: 0;
}
ul.timeline > li > .timeline-panel:after {
right: auto;
left: -14px;
border-right-width: 14px;
border-left-width: 0;
}
}
You have given the calculated width for .timeline-panel till 767px resolution. And for other devices the width is 46%. This is why the timeline-panel is not aligned next to the icon.
Solution #1
Try giving calculated width for timeline-panel for all devices. So remove calc in (min-width:767px) and add it to top declartion.
ul.timeline > li > .timeline-panel {
float: left;
position: relative;
width: 46%; // remove this or can be fallback
padding: 30px 30px 20px 0px;
width: calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
}
Solution #2
Remove width for .timeline-panel in (min-width:767px) and update the top declaration,
#media(max-width:767px) {
//remove
/*ul.timeline > li > .timeline-panel {
width: calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
} */
}
.timeline > li > .timeline-panel {
float: left;
position: relative;
width: 100%;
padding: 30px 30px 20px 100px;
}
I prefer this approach. here's the code pen for this,
https://codepen.io/anon/pen/bZrqGO
Thanks!
I have a bunch of div content boxes. I also used pseudo before and after selectors to create arrows for each box. Now I have put background colors for the content boxes. I want to put the respective background color Inside the arrows also.
I tried this but it it creates the background color outside the arrows not inside:
.timeline .post:nth-child(1n) .timeline-content.bg-blue::before, .timeline .post:nth-child(1n) .timeline-content.border-blue::before {background-color: blue;}
You're going about making the arrows a strange way.
This is the most common method.
.content {
width: 50%;
height: 100px;
background: orange;
margin: 10px auto;
position: relative;
}
.content:before {
content: '';
position: absolute;
width: 0;
height: 0;
border: 15px solid transparent;
top: 10px;
}
.left:before {
right: 100%;
border-right-color: orange;
}
.right:before {
left: 100%;
border-left-color: orange;
}
<div class="content left">
</div>
<div class="content right">
</div>
Working solution..
HTML
<div class="container_24">
<div class="grid_24">
<section id="timeline">
<div class="content">
<div class="timeline">
<article class="post">
<div class="timeline-time">
<time>January, 2005-2010</time>
</div>
<div class="timeline-content tc-left bg-blue wow slideInLeft" id="tc1">
<h2 class="entry-title">
Title 1 Goes Here
</h2>
<div class="entry-content">
Content 1 Goes Here
</div>
</div>
</article><!-- .post -->
<article class="post">
<div class="timeline-time">
<time>Jan 1, 2005</time>
</div>
<div class="timeline-content bg-green wow slideInRight" id="tc2">
<h2 class="entry-title">
Title Goes Here
</h2>
<div class="entry-content">
<p>Content 2 Goes Here</p>
</div>
</div>
</article>
<article class="post">
<div class="timeline-time">
<time>Jan 1, 2006</time>
</div>
<div class="timeline-content tc-left bg-red wow slideInLeft" id="tc3">
<h2 class="entry-title">
Title Goes Here
</h2>
<div class="entry-content">
<p>Content 3 Goes Here</p>
</div>
</div>
</article><!-- .post -->
<article class="post">
<div class="timeline-time">
<time>Jan 1, 2008</time>
</div>
<div class="timeline-content bg-orange wow slideInRight" id="tc4">
<h2 class="entry-title">
Title Goes Here
</h2>
<div class="entry-content">
<p>
Content 4 Goes Here
</p>
</div>
</div>
</article>
<article class="post">
<div class="timeline-time">
<time>Jan 1, 2010</time>
</div>
<div class="timeline-content tc-left bg-gray wow slideInLeft" id="tc5">
<h2 class="entry-title">
Title Goes Here
</h2>
<div class="entry-content">
<p>Content 5 Goes Here</p>
</div>
</div>
</article><!-- .post -->
</div><!-- end timeline -->
</div><!-- end content -->
</section><!-- end section -->
CSS
/*************************
Timeline Styles
*************************/
.timeline {
padding: 20px 0;
position: relative;
}
.timeline:before {
background-color: #d2d2d2;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 2px;
content: "";
display: block;
height: 100%;
left: 50%;
margin-left: -2px;
position: absolute;
top: 0;
width: 4px;
}
.timeline .post {
border: 0 none;
margin: 0;
padding: 0 40px 5px 0;
width: 50%;
}
.timeline .post:last-child, .timeline .post:nth-child(even):last-child {
padding-bottom: 0;
}
.timeline .post:nth-child(even) {
margin-left: 50%;
padding: 0 0 5px 40px;
}
.timeline .post:nth-child(even) .timeline-time {
left: auto;
margin: 31px 40px 0 0;
right: 50%;
text-align: right;
}
.timeline .post:nth-child(even) .timeline-content:before {
border: 15px solid transparent;
border-right-color: #ccc;
left: -30px;
right: auto;
}
.timeline .post:nth-child(even) .timeline-content:after {
border: 14px solid transparent;
left: -28px;
right: auto;
}
.timeline .post .timeline-time {
color: #999;
left: 50%;
margin: 31px 0 0 40px;
position: absolute;
}
.timeline .post .timeline-content {
border: 1px solid #ccc;
border-radius: 3px;
padding: 46px;
position: relative;
}
.timeline .post .timeline-content:before, .timeline .post .timeline-content:after {
border: 15px solid transparent;
border-left-color: #ccc;
content: "";
display: block;
position: absolute;
right: -30px;
top: 26px;
}
.timeline .post .timeline-content:after {
border: 14px solid transparent;
right: -28px;
top: 27px;
}
.tc-left {right: 40px;}
.bg-blue {background: blue;}
.bg-green {background: green;}
.bg-red {background: red;}
.bg-orange {background: orange;}
.bg-gray {background: gray;}
.timeline .post:nth-child(1n) .timeline-content.bg-blue::before, .timeline .post:nth-child(1n) .timeline-content.border-blue::before {background-color: #fff;border-left-color: blue;}
.timeline .post:nth-child(2n) .timeline-content.bg-green::before, .timeline .post:nth-child(2n) .timeline-content.border-green::before {border-color: #fff;border-right-color: green;}
.timeline .post:nth-child(3n) .timeline-content.bg-red::before, .timeline .post:nth-child(3n) .timeline-content.border-red::before {border-color: #fff;border-left-color: red;}
.timeline .post:nth-child(4n) .timeline-content.bg-orange::before, .timeline .post:nth-child(4n) .timeline-content.border-orange::before {border-color: #fff;border-right-color: orange;}
.timeline .post:nth-child(5n) .timeline-content.bg-gray::before, .timeline .post:nth-child(5n) .timeline-content.border-gray::before {border-color: #fff;border-left-color: gray;}
Check out this Fiddle too