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!
Related
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>
I'm trying to create this timeline telling people about graffiti art. I have a problem where I couldn't cut short my page and it would let me scroll down to nothingness. Here is the code with only CSS and HTML.
EDIT:
Here is a Gif about my problem is, I tried to remove the timeline: 3000px, but it only works for the snippet, didn't work for Dreamweaver. I tried to run on both Chrome and Firefox
GIF OF MY PROBLEM
#charset "utf-8";
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
height: 3000px;
}
body {
max-height: 3000px;
}
ul {
max-height: 3000px;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.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 {
width: 46%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li > .timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 22px;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
background-color: #999999;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.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-badge.primary {
background-color: #2e6da4;
}
.timeline-badge.success {
background-color: #3f903f;
}
.timeline-badge.warning {
background-color: #f0ad4e;
}
.timeline-badge.danger {
background-color: #d9534f;
}
.timeline-badge.info {
background-color: #5bc0de;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
.timeline-body {
text-align: left;
margin: 0px;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
.timeline-panel .timeline-body .img-responsive {
padding-top: 5px;
}
#media screen and (max-width:768px){
#closer1 {
top: -200px;
}
#closer2 {
top: -200px;
}
#closer3 {
top: -200px;
}
#closer4 {
top: -200px;
}
#closer5 {
top: -200px;
}
#closer6 {
top: -200px;
}
#closer7 {
top: -200px;
}
}
<body>
<div class="container">
<div class="page-header">
<h1 id="timeline">History</h1>
</div>
<ul class="timeline">
<li>
<div class="timeline-badge">1970</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title"></h4>
</div>
<div class="timeline-body">
<p>n modern times, paint (particularly spray paint) and marker pens have become the most commonly used graffiti materials. </p>
</div>
</li>
<li class="timeline-inverted" id="closer">
<!--<div class="timeline-badge warning"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title"></h4>
</div>
<div class="timeline-body">
<p>A train full with what consider vandalism at that time.</p>
</div>
</div>
</li>
<li id="closer1">
<!--<div class="timeline-badge danger"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title"></h4>
</div>
<div class="timeline-body">
<p>In most countries, marking or painting property without the property owner's permission is considered defacement and vandalism, which is a punishable crime</p>
</div>
</div>
</li>
<li class="timeline-inverted" id="closer2">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">1970s</h4>
</div>
<div class="timeline-body">
<p>Soon art galleries in New York began buying graffiti but it was around that time when John Lindsey, the mayor of New York at that time, declared the first war on graffiti in 1972. A few die-hard artists refused to be beaten and kept the art form alive during this period.</p>
</div>
</div>
</li>
<li id="closer3">
<div class="timeline-badge info">1980</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title"></h4>
</div>
<div class="timeline-body">
<p>Graffiti is considered one of the four elements of hip-hop (along with emceeing, DJing, and B-Boying). Graffiti is a central part of this subculture. The origins of all of these can be traced to the Bronx, in New York City.</p>
</div>
</div>
</li>
<li class="timeline-inverted" id="closer4">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Modern graffiti</h4>
</div>
<div class="timeline-body">
<p>On top of the political aspect of graffiti as a movement, political groups and individuals may also use graffiti as a tool to spread their point of view.</p>
</div>
</div>
</li>
<li id="closer5">
<!--<div class="timeline-badge success"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Banksy's work</h4>
</div>
<div class="timeline-body">
<p>Banksy displays his art on publicly visible surfaces such as walls and self-built physical prop pieces.</p>
</div>
</div>
</li>
<li class="timeline-inverted in" id="closer6">
<!--<div class="timeline-badge success"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Another Banksy works</h4>
</div>
<div class="timeline-body">
<p>Both Mickey Mouse and Ronald McDonald are two family-friendly faces of American capitalism, the same country that dropped Napalm on Vietnam</p>
</div>
</div>
</li>
<li id="closer7">
<!--<div class="timeline-badge success"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lady Pink</h4>
</div>
<div class="timeline-body">
<p>Lady Pink was born in Ecuador, raised in NYC and currently resides in the countryside north of the city</p>
</div>
</div>
</li>
</ul>
</div>
</body>
As you can see, I try to reduce the height of the page by using max-height in both body and container. But It just didn't work.
Thank you in advance!
.timeline {
height: 3000px;
}
This is the problem. I deleted the height: 3000px and it looks fine now. Also I don't think the max-height: 3000px in body and ul is necessary anymore.
#charset "utf-8";
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
body {
}
ul {
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.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 {
width: 46%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li > .timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 22px;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
background-color: #999999;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.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-badge.primary {
background-color: #2e6da4;
}
.timeline-badge.success {
background-color: #3f903f;
}
.timeline-badge.warning {
background-color: #f0ad4e;
}
.timeline-badge.danger {
background-color: #d9534f;
}
.timeline-badge.info {
background-color: #5bc0de;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
.timeline-body {
text-align: left;
margin: 0px;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
.timeline-panel .timeline-body .img-responsive {
padding-top: 5px;
}
#media screen and (max-width:768px){
#closer1 {
top: -200px;
}
#closer2 {
top: -200px;
}
#closer3 {
top: -200px;
}
#closer4 {
top: -200px;
}
#closer5 {
top: -200px;
}
#closer6 {
top: -200px;
}
#closer7 {
top: -200px;
}
}
<body>
<div class="container">
<div class="page-header">
<h1 id="timeline">History</h1>
</div>
<ul class="timeline">
<li>
<div class="timeline-badge">1970</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title"></h4>
</div>
<div class="timeline-body">
<p>n modern times, paint (particularly spray paint) and marker pens have become the most commonly used graffiti materials. </p>
</div>
</li>
<li class="timeline-inverted" id="closer">
<!--<div class="timeline-badge warning"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title"></h4>
</div>
<div class="timeline-body">
<p>A train full with what consider vandalism at that time.</p>
</div>
</div>
</li>
<li id="closer1">
<!--<div class="timeline-badge danger"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title"></h4>
</div>
<div class="timeline-body">
<p>In most countries, marking or painting property without the property owner's permission is considered defacement and vandalism, which is a punishable crime</p>
</div>
</div>
</li>
<li class="timeline-inverted" id="closer2">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">1970s</h4>
</div>
<div class="timeline-body">
<p>Soon art galleries in New York began buying graffiti but it was around that time when John Lindsey, the mayor of New York at that time, declared the first war on graffiti in 1972. A few die-hard artists refused to be beaten and kept the art form alive during this period.</p>
</div>
</div>
</li>
<li id="closer3">
<div class="timeline-badge info">1980</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title"></h4>
</div>
<div class="timeline-body">
<p>Graffiti is considered one of the four elements of hip-hop (along with emceeing, DJing, and B-Boying). Graffiti is a central part of this subculture. The origins of all of these can be traced to the Bronx, in New York City.</p>
</div>
</div>
</li>
<li class="timeline-inverted" id="closer4">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Modern graffiti</h4>
</div>
<div class="timeline-body">
<p>On top of the political aspect of graffiti as a movement, political groups and individuals may also use graffiti as a tool to spread their point of view.</p>
</div>
</div>
</li>
<li id="closer5">
<!--<div class="timeline-badge success"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Banksy's work</h4>
</div>
<div class="timeline-body">
<p>Banksy displays his art on publicly visible surfaces such as walls and self-built physical prop pieces.</p>
</div>
</div>
</li>
<li class="timeline-inverted in" id="closer6">
<!--<div class="timeline-badge success"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Another Banksy works</h4>
</div>
<div class="timeline-body">
<p>Both Mickey Mouse and Ronald McDonald are two family-friendly faces of American capitalism, the same country that dropped Napalm on Vietnam</p>
</div>
</div>
</li>
<li id="closer7">
<!--<div class="timeline-badge success"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lady Pink</h4>
</div>
<div class="timeline-body">
<p>Lady Pink was born in Ecuador, raised in NYC and currently resides in the countryside north of the city</p>
</div>
</div>
</li>
</ul>
</div>
</body>
So after a while i figured out myself what was the problem.
The problems are:
1/ .timeline
This is the parent and the position is relative. I set this max-height to 3000px
2/ The height that i set for each #closer is bigger and bigger and they are also relative. (-200px each)
Because of those 2 things, i accidentally expand my .body height higher and higher
The reason why i didn't notice this earlier because in my original file, i put it -400px for #closer1 and -800px for #closer2. This however expand my total max-height of timeline to over (3000px). This was the reason cause my page longer than before.
So yeah, when i delete the max-height and change each #closer to -200px, it's worked
All thank to #lnhtmn for his solution
I am getting scroll issue in chat website. Where bottom scrollbar is not visible and scroll is not working in live chat.
#charset "utf-8";
/* CSS Document */
html,
body {
font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
line-height: 20px;
margin: 0;
padding: 0;
overflow: hidden;
box-sizing: border-box;
height: 100%;
}
.inner {
max-width: 100%;
padding: 0 20px;
}
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9 {
display: block;
position: relative;
float: left;
width: 100%
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
header {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
background: #333;
min-height: 60px;
}
header:after {
clear: both;
content: '';
display: table;
}
header nav {
position: relative;
padding: 20px;
}
.credit {
position: absolute;
top: 0;
right: 40px;
color: #fff;
text-align: right;
text-transform: capitalize;
font-weight: 700;
}
.credit i {
position: absolute;
top: 26px;
padding-left: 20px;
}
.credit p {
margin: 10px 0 0 0;
padding: 0;
}
.trigger {
display: inline-block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 28px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-4px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.col-3:after {
content: '';
clear: both;
display: block;
}
.logo a {
position: absolute;
top: 26px;
left: 80px;
font-size: 28px;
display: block;
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
.bets,
.video,
.chat {
position: relative;
overflow-y: scroll;
height: 100%;
z-index: 1;
background: #191919;
}
.PB15 {
padding: 15px 15px 15px 30px;
}
.section {
position: relative;
height: 100%;
width: 100%;
padding-top: 78px;
}
.PB80 {
padding-bottom: 78px;
}
.bets-title {
background: #282828;
padding: 15px 15px 15px 45px;
color: #fff;
line-height: 15px;
}
.bets-title span {
padding-left: 15px;
font-weight: 600;
}
.video {
background: #222222;
}
.video .video-content {
padding: 20px 10px 30px 60px;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: scroll;
}
.video-title {
list-style: none;
color: #fff;
margin: 0;
padding: 0;
}
.video-title li {
display: inline-block;
}
.video-title li:first-child {
font-size: 20px;
font-weight: 700;
}
.video-title li:last-child {
color: rgba(159, 159, 159, 1.00);
position: absolute;
right: 0;
margin-right: 20px;
}
.list {
list-style: none;
margin: 0;
padding: 10px 0 0 0;
}
.video h3 {
color: #fff;
}
.list li {
display: inline-block;
color: #fff;
}
.list span {
padding: 0 20px 0 10px;
color: rgba(159, 159, 159, 1.00);
}
.max-100 {
display: block;
max-width: 100%;
}
.chat .bets-title {
margin-bottom: 10px;
}
.container {
padding: 20px 0 0 20px;
}
.users {
position: relative;
margin-bottom: 15px;
display: flex;
}
.users img {
width: 30px;
height: 30px;
max-width: 100%;
}
.username {
color: #a7a7a7;
font-weight: 600;
}
.users .user-msg {
color: #fff;
padding: 0 20px;
}
.users span:last-child {
padding-left: 10px;
}
.col-1 {
width: 8.33333333333%
}
.col-2 {
width: 16.6666666667%
}
.col-3 {
width: 25%
}
.col-4 {
width: 33.3333333333%
}
.col-5 {
width: 41.6666666667%
}
.col-6 {
width: 50%
}
.col-7 {
width: 58.3333333333%
}
.col-8 {
width: 66.6666666667%
}
.col-9 {
width: 75%
}
.col-10 {
width: 83.3333333333%
}
.col-11 {
width: 91.6666666667%
}
.col-12 {
width: 100%
}
#media (min-width: 768px) {
.col-3 {
width: 100%;
}
.col-6 {
width: 100%;
}
}
#media (min-width: 1200px) {
.col-1 {
width: 8.33333333333%
}
.col-2 {
width: 16.6666666667%
}
.col-3 {
width: 25%
}
.col-4 {
width: 33.3333333333%
}
.col-5 {
width: 41.6666666667%
}
.col-6 {
width: 50%
}
.col-7 {
width: 58.3333333333%
}
.col-8 {
width: 66.6666666667%
}
.col-9 {
width: 75%
}
.col-10 {
width: 83.3333333333%
}
.col-11 {
width: 91.6666666667%
}
.col-12 {
width: 100%
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Live Chat</title>
</head>
<body>
<header>
<div class="inner">
<nav>
<div class="trigger" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="logo">Chat
</div>
<div class="credit">
<p>Credtis available</p>
<p>23,000</p>
<i class="fa fa-user-circle"></i>
</div>
</nav>
</div>
</header>
<div class="section">
<div class="col-3">
<div class="bets-title">
<i class="fa fa-angle-right"></i> <span>Live Bets</span>
</div>
<div class="bets">
</div>
<div class="PB80"></div>
</div>
<div class="col-6 video">
<div class="video-contents">
<video width="100%" height="100%" controls>
<source src="demo.mp4" type="video/mp4"></source>
Your browser does not support the video tag.
</video>
<div class="video-content">
<ul class="video-title">
<li>The Mighty Scrpio VS Legacy Prime Mantis</li>
<li>1,548 watching now</li>
</ul>
<ul class="list">
<li><i class="fa fa-thumbs-o-up"></i><span>2.8k</span>
</li>
<li><i class="fa fa-thumbs-o-down"><span>112</span></i>
</li>
<li><i class="fa fa-reply"></i>
</li>
</ul>
<h3>Current Best Total: 13,000 credits</h3>
</div>
</div>
<div class="video-contents">
<video width="100%" height="100%" controls>
<source src="demo.mp4" type="video/mp4"></source>
Your browser does not support the video tag.
</video>
<div class="video-content">
<ul class="video-title">
<li>The Mighty Scrpio VS Legacy Prime Mantis</li>
<li>1,548 watching now</li>
</ul>
<ul class="list">
<li><i class="fa fa-thumbs-o-up"></i><span>2.8k</span>
</li>
<li><i class="fa fa-thumbs-o-down"><span>112</span></i>
</li>
<li><i class="fa fa-reply"></i>
</li>
</ul>
<h3>Current Best Total: 13,000 credits</h3>
</div>
</div>
<div class="video-contents">
<video width="100%" height="100%" controls>
<source src="demo.mp4" type="video/mp4"></source>
Your browser does not support the video tag.
</video>
<div class="video-content">
<ul class="video-title">
<li>The Mighty Scrpio VS Legacy Prime Mantis</li>
<li>1,548 watching now</li>
</ul>
<ul class="list">
<li><i class="fa fa-thumbs-o-up"></i><span>2.8k</span>
</li>
<li><i class="fa fa-thumbs-o-down"><span>112</span></i>
</li>
<li><i class="fa fa-reply"></i>
</li>
</ul>
<h3>Current Best Total: 13,000 credits</h3>
</div>
</div>
<div class="PB80"></div>
</div>
<div class="col-3">
<div class="bets-title">
<i class="fa fa-angle-right"></i> <span>Live Chat</span>
</div>
<div class="chat PB15">
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Rupareliya</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Raina</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet</span><span>Lorem ipsum</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Rupareliya</span><span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Raina</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Rupareliya</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Raina</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet</span><span>Lorem ipsum</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Rupareliya</span><span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Raina</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Rupareliya</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Raina</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet</span><span>Lorem ipsum</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Rupareliya</span><span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Raina</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
</div>
</div>
<div class="PB80"></div>
</div>
</div>
</div>
</body>
</html>
Your chat class is assigned to wrong block. You have col-6 video block. Under that you have block with class col-3 to wrap your chat html. Just give him your special class chat and everything should work
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
.hot-deals-row{
margin-top: 30px;
background: #eaeaea;
}
.hot-deals-box{
border: 1px solid #eaeaea;
}
.hot-deals-box .hot-deals-tab {
display: table;
width: 100%;
}
.hot-deals-box .hot-deals-tab .hot-deals-title{
width: 45px;
display: table-cell;
text-transform: uppercase;
font-size: 24px;
text-align: center;
background: #0088cc;
color: #fff;
padding-top: 2px;
}
.hot-deals-box .hot-deals-tab .hot-deals-title>span{
width: 100%;
float: left;
text-align: center;
}
.hot-deals-box .hot-deals-tab .hot-deals-title>span.yellow{
color: #ffcc00;
}
.hot-deals-box .hot-deals-tab .hot-deals-tab-box{
display: table-cell;
padding:25px;
}
.hot-deals-box .hot-deals-tab .hot-deals-tab-box .nav-tab li{
line-height: 40px;
border-bottom: 1px solid #eaeaea;
text-transform: uppercase;
padding-left: 15px;
}
.hot-deals-box .hot-deals-tab .hot-deals-tab-box .nav-tab li.active>a{
color: #0099cc;
}
.hot-deals-box .hot-deals-tab .box-count-down{
margin-top: 20px;
float: left;
padding-left: 4px;
}
.hot-deals-box .hot-deals-tab .box-count-down .box-count{
width: 67px;
height:67px;
border:1px solid #eaeaea;
float: left;
border-radius: 90%;
text-align: center;
padding: 10px;
position: relative;
color: #fff;
margin-left: -4px;
background: #fff;
}
.hot-deals-box .hot-deals-tab .box-count-down .dot{
display: none;
}
.hot-deals-box .hot-deals-tab .box-count-down .box-count:before{
width: 100%;
height: 100%;
background: #0088cc;
float: left;
content: '';
border-radius: 90%;
}
.hot-deals-box .hot-deals-tab .box-count-down .box-count:after{
content: '';
width: 23px;
height: 1px;
background: #fff;
position: absolute;
top: 34px;
left: 20px;
}
.hot-deals-box .hot-deals-tab .box-count-down .number{
position: absolute;
width: 100%;
left: 0;
top: 15px;
}
.hot-deals-box .hot-deals-tab .box-count-down .text{
position: absolute;
width: 100%;
left: 0;
bottom: 16px;
font-size: 10px;
}
.hot-deals-box .hot-deals-tab-content-col{
padding-left: 0;
}
.hot-deals-box .hot-deals-tab-content{
padding: 30px 30px 0 0;
}
.hot-deals-box .product-list .left-block{
border: 1px solid #eaeaea;
padding: 0;
}
.hot-deals-box .product-list .right-block {
text-align:center;
font-family: "Comic Sans MS", cursive;
font-size: large;
}
<div class="hot-deals-row">
<div class="container">
<div class="hot-deals-box">
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-1">
<div class="hot-deals-tab">
<div class="hot-deals-title vertical-text">
<span>D</span>
<span>E</span>
<span>A</span>
<span>L</span>
<span class="yellow">O</span>
<span class="yellow">F</span>
<span>T</span>
<span>H</span>
<span>E</span>
<span class="yellow">d</span>
<span class="yellow">a</span>
<span class="yellow">y</span>
</div>
</div>
<div class="col-sm-10 col-md-10 col-lg-10 hot-deals-tab-content-col">
<div class="hot-deals-tab-content tab-container">
<div id="hot-deal-1" class="tab-panel active">
<ul class="product-list owl-carousel nav-center" data-dots="false" data-loop="true" data-nav = "true" data-margin = "29" data-autoplayTimeout="1000" data-autoplayHoverPause = "true" data-responsive='{"0":{"items":1},"600":{"items":3},"1000":{"items":4}}'>
<li>
<div class="left-block">
<img class="img-responsive" alt="product" src="assets/data/option4/p8.jpg" />
</div>
<div class="price-percent-reduction2">
20% OFF
</div>
<div class="right-block">
<h5 class="product-name">Android Smartphone </h5>
<div class="content_price">
<span class="price product-price">$48,95</span>
<span class="price old-price">$62,00</span>
</div>
</div>
</li>
<li>
<div class="left-block">
<img class="img-responsive" alt="product" src="assets/data/option4/p12.jpg" />
</div>
<div class="price-percent-reduction2">
30% OFF
</div>
<div class="right-block">
<h5 class="product-name">Micromax X1800</h5>
<div class="content_price">
<span class="price product-price">$68,95</span>
<span class="price old-price">$82,00</span>
</div>
</div>
</li>
<li>
<div class="left-block">
<img class="img-responsive" alt="product" src="assets/data/option4/p11.jpg" />
</div>
<div class="price-percent-reduction2">
40% OFF
</div>
<div class="right-block">
<h5 class="product-name">Desire 620G 5-Inch Dual SIM Android </h5>
<div class="content_price">
<span class="price product-price">$58,95</span>
<span class="price old-price">$72,00</span>
</div>
</div>
</li>
<li>
<div class="left-block">
<img class="img-responsive" alt="product" src="assets/data/option4/p12.jpg" />
</div>
<div class="price-percent-reduction2">
10% OFF
</div>
<div class="right-block">
<h5 class="product-name">Canvas Juice 2 AQ5001 </h5>
<div class="content_price">
<span class="price product-price">$84,95</span>
<span class="price old-price">$95,00</span>
</div>
</div>
</li>
</ul>
</div>
image1
my desktop view is like shown in the image1.
image2
when i resize my screen the output i get is shown in the image2.
Now i want to convert these image2 into the horizontal view when my screen size is 767px.
You need a media query something like this:
#media screen and (max-width: 767px) {
.hot-deals-box .hot-deals-tab .hot-deals-title > span {
width: auto;
display: inline-block;
}
}
JSfiddle Demo
.hot-deals-row {
margin-top: 30px;
background: #eaeaea;
}
.hot-deals-box {
border: 1px solid #eaeaea;
}
.hot-deals-box .hot-deals-tab {
display: table;
width: 100%;
}
.hot-deals-box .hot-deals-tab .hot-deals-title {
//width: 45px;
display: table-cell;
text-transform: uppercase;
font-size: 24px;
text-align: center;
background: #0088cc;
color: #fff;
padding-top: 2px;
}
.hot-deals-box .hot-deals-tab .hot-deals-title > span {
width: 100%;
float: left;
text-align: center;
}
.hot-deals-box .hot-deals-tab .hot-deals-title>span.yellow {
color: #ffcc00;
}
.hot-deals-box .hot-deals-tab .hot-deals-tab-box {
display: table-cell;
padding: 25px;
}
#media screen and (max-width: 767px) {
.hot-deals-box .hot-deals-tab .hot-deals-title > span {
width: auto;
display: inline-block;
}
}
<div class="hot-deals-row">
<div class="container">
<div class="hot-deals-box">
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-1">
<div class="hot-deals-tab">
<div class="hot-deals-title vertical-text"> <span>D</span>
<span>E</span>
<span>A</span>
<span>L</span>
<span class="yellow">O</span>
<span class="yellow">F</span>
<span>T</span>
<span>H</span>
<span>E</span>
<span class="yellow">d</span>
<span class="yellow">a</span>
<span class="yellow">y</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>