I have following html for my site:
Edit: https://jsfiddle.net/3v66fv3u/1/ for the static site
and my approach of making the site responsive: https://jsfiddle.net/wba321bm/
<!DOCTYPE html>
<html>
<head>
<link href="custom.css" rel="stylesheet">
</head>
<body>
<h1 class="title">Headline</h1>
<div class="wrapper">
<div class="left">
<div class="top">
<img id="img_1" src="img_1.png">
</div>
<div class="bottom">
<img id="img_3" src="img_3.png">
</div>
</div>
<div class="middle">
<div class="about-text">
<h3>small headline</h3>
<p>actually a lot of text</p>
</div>
</div>
<div class="right">
<div class="top">
<img id="img_2" src="img_2.png">
</div>
<div class="bottom">
<img id="img_4" src="img_4.png">
</div>
</div>
</div>
<img class="banner" src="banner.png"/>
</body>
</html>
And this is my current css file:
html {
font-family: "Verdana", Geneva, sans-serif;
color: white;
}
body {
margin: auto;
background-color: black;
width: 1150px;
}
hr {
border-top: 1px dotted black;
}
.title {
text-align: center;
padding-bottom: 20px;
}
.wrapper {
margin: auto;
}
.left {
float: left;
}
.middle {
height: 597px;
width: 550px;
float: left;
border-top: 1px solid white;
border-bottom: 1px solid white;
box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);
margin-top: -4px;
}
.about-text {
margin-left: 25px;
margin-right: 25px;
}
.right {
float: left;
}
.gallery {
padding-top: 100px;
width: 100%;
text-align: center;
}
img {
height: 300px;
transition: 0.5s ease;
backface-visibility: hidden;
/* inline-block fügt standardmäßig 4px Padding hinzu
das muss nun wieder subtrahiert werden. */
margin-top: -4px;
}
img:hover {
opacity: 0.5;
}
#img_1 {
border-top-left-radius: 30px;
}
#img_2 {
border-top-right-radius: 30px;
}
#img_3 {
border-bottom-left-radius: 30px;
}
#img_4 {
border-bottom-right-radius: 30px;
}
/* 827 x 178 */
.banner {
width: 410px;
height: 90px;
position: absolute;
right: 0px;
bottom: 0px;
}
The website currently looks like this (with static layout):
Now I want to go away from the fixed layout and want to make the website responsive. However, when I give the fields a relative width the whole layout gets messed up...
This is the css I tried to use to achieve the responsive layout:
html, body {
font-family: "Verdana", Geneva, sans-serif;
color: white;
background-color: black;
height: 100%;
}
hr {
border-top: 1px dotted black;
}
.title {
text-align: center;
padding-bottom: 20px;
}
.wrapper {
border: 1px solid white;
margin: auto;
width: 80%;
}
.left {
float: left;
}
.middle {
width: 40%;
height: auto;
float: left;
border-top: 1px solid white;
border-bottom: 1px solid white;
box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);
margin-top: -4px;
}
.about-text {
margin-left: 25px;
margin-right: 25px;
}
.right {
float: left;
}
.gallery {
padding-top: 100px;
width: 100%;
text-align: center;
}
img {
width: 40%;
height: auto;
transition: 0.5s ease;
backface-visibility: hidden;
/* inline-block fügt standardmäßig 4px Padding hinzu
das muss nun wieder subtrahiert werden. */
margin-top: -4px;
}
img:hover {
opacity: 0.5;
}
#img_1 {
border-top-left-radius: 30px;
}
#img_2 {
border-top-right-radius: 30px;
}
#img_3 {
border-bottom-left-radius: 30px;
}
#img_4 {
border-bottom-right-radius: 30px;
}
/* 827 x 178 */
.banner {
width: 20%;
height: 10%;
position: absolute;
right: 0px;
bottom: 0px;
}
It's a matter of WHICH elements get the percentage value. In my adaptation of your fiddle, I assigned width: 30% to .left and right (which are the containers for the images) and made the image width 100% to span the whole width of their containers.
See here: https://jsfiddle.net/35n4dxqn/1/
well, when you give a or a division relative attribute it will be placed relative or according to the previous div i.e. it will not be independent from other divisions.
the solution if you want to make it responsive one forward and efficient way is to use Grid System (Bootstrap class).
Related
I'm trying to make a 'custom' progress bar with numbers at each end of the progress bar. Left hand number being the current value, and the right hand side being the max/target value. I've got it so that I'm showing the two numbers but I can't seem to position the right hand number correctly.
What I'm trying to achieve is...
and what I currently have is...
This is what I currently have code wise...
JSFiddle
.progress-outer {
width: 96%;
margin: 10px 2%;
padding: 3px;
text-align: center;
background-color: #f4f4f4;
border: 1px solid #dcdcdc;
color: #fff;
border-radius: 20px;
}
.progress-inner {
min-width: 15%;
white-space: nowrap;
overflow: hidden;
padding: 5px;
border-radius: 20px;
background-color: orange;
}
.progressBarCurrent {
color: black;
float: left;
}
.progressBarGoal {
color: black;
float: right;
}
<div class="progress-outer">
<div class="progress-inner" style="width:27%;">
<span class="progressBarCurrent">50g</span>
<span class="progressBarGoal">180g</span>
</div>
</div>
I've tried putting the the second span outside the the progress inner div but then moves the text outside the whole thing and I couldn't work out how to move it into the correct place.
Can anyone help?
I have an interesting solution using linear-gradients, its pretty close, try playing around with the margins and outline to get border right.
.progress-outer {
width: 96%;
display: flex;
height: 35px;
margin: 10px 2%;
text-align: center;
border: 1px solid #dcdcdc;
background-image: linear-gradient( 80deg, orange 37% , #f4f4f4 37% );
border-radius: 20px;
justify-content: center;
align-items: center;
}
.progressBarCurrent {
color: black;
text-align: left;
width: 50%;
position: relative;
margin: 0px;
margin-left: 20px;
}
.progressBarGoal {
color: black;
position: relative;
text-align: right;
width: 50%;
margin: 0px;
margin-right: 20px;
}
<div class="progress-outer">
<span class="progressBarCurrent">50g</span>
<span class="progressBarGoal">180g</span>
</div>
Instead of float:left you can use position:absolute
.progress-outer {
width: 96%;
margin: 10px 2%;
padding: 3px;
text-align: center;
background-color: #f4f4f4;
border: 1px solid #dcdcdc;
color: #fff;
border-radius: 20px;
position: relative;
}
.progress-inner {
min-width: 15%;
white-space: nowrap;
overflow: hidden;
padding: 5px;
border-radius: 20px;
background-color: orange;
}
.progressBarCurrent {
color: black;
float: left;
}
.progressBarGoal {
color: black;
position: absolute;
right: 5px;
}
<div class="progress-outer">
<div class="progress-inner" style="width:27%;">
<span class="progressBarCurrent">50g</span>
<span class="progressBarGoal">180g</span>
</div>
</div>
Im a beginner for the bootstrap, some text are every where, how can i set it
Im trying to make some application its is not a working for all of mobile devices,its only working for iPhone 6+ and nexus 6p
how can i fix it??
html
<div class="progress-bar position" data-percent="48" data-duration="1000" data-color="#63676e,#ec9850"><script>$(".progress-bar").loading();</script></div>
<div id="Main">
<h2 class="text-color-header">Room Utilization</h2>
<h5 class="text-header">9 rooms occupied today</h5>
<div id="container">
<div class="block block-1">
<h1>$ 2,300</h1>
<h5>Today Revenue</h5>
</div>
<div class="block block-2">
<h1>$ 12,100</h1>
<h5>Reservation for next 15 days</h5>
</div>
<div class="block block-3">
<h1>$ 41,000</h1>
<h5>Revenue Todate / Month</h5>
</div>
<div class="block block-4">
<h1>$ 53,100</h1>
<h5>Expected Revenue for this month</h5>
</div>
<!--Menu Part 02-->
<div id="base">
<div class="base-block">
<h4>Payments</h4>
<h1>$ 2,000</h1>
<h5>5 check-outs today</h5>
</div>
<div class="base-block">
<h4>Down Payments</h4>
<h1>$ 300</h1>
<h5>2 Bokings withdown payments</h5>
</div>
</div>
<!-- End of menu Part-->
</div>
</div>
css
body{webkit-overflow-scrolling: touch;}
.text-color-header { margin-top: 250px;}
/* Progress Bar */
.progress-bar {
text-align: center;
height: 150px;
width: 150px;
margin-left: 100px;
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
.progress-bar div {
position: absolute;
height: 200px;
width: 200px;
border-radius: 50%;
}
.progress-bar div span {
position: absolute;
font-family: Arial;
font-size: 35px;
line-height: 175px;
height: 175px;
width: 175px;
left: 12.5px;
top: 12.5px;
text-align:center;
border-radius: 50%;
background-color:#e0e0e0;
color: black;
}
.progress-bar .background {
background-color: #b3cef6;
}
.progress-bar .rotate {
clip: rect(0 100px 200px 0);
background-color: #4b86db;
}
.progress-bar .left {
clip: rect(0 100px 200px 0);
opacity: 1;
background-color: #b3cef6;
}
.progress-bar .right {
clip: rect(0 100px 200px 0);
transform: rotate(180deg);
opacity: 0;
background-color: #4b86db;
}
#keyframes toggle {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*End of Progress Bar*/
.page {
margin: 0px auto;
display: flex;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.clearfix {
display: inline-block;
margin: 0px auto;
}
h5,
.h5 {
font-size: 13px;
text-align: center;
}
.block {
width: 200px;
height: 100px;
margin: 1px;
display: inline-block;
background: ;
color: #d4c4b6;
}
.block:hover h1 {
color: #000000;
}
.block:hover h5 {
color: #A48973;
}
#base {
background: #e2e2e2;
display: inline-block;
height: 120px;
margin-left: 0px;
margin-top: -7px;
position: relative;
width: auto;
}
#base:before {
border-bottom: 35px solid #e2e2e2;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
content: "";
height: 0;
left: 173px;
position: absolute;
top: -20px;
width: 0;
}
h1,
.h1 {
font-size: 27px;
text-align: center;
}
h2,
.h2 {
font-size: 20px;
text-align: center;
}
h4,
.h4 {
font-size: 16px;
text-align: center;
}
.base-block {
display: inline-block;
height: 120px;
width: 200px;
margin: 1px;
display: inline-block;
}
.base-block h1,
h4 {
color: #000000;
}
.base-block h5 {
color: #A48973;
}
.navbar-default .navbar-brand {
color: #A48973;
}
.navbar-default .navbar-toggle {
border: none;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #A48973;
}
.search-bar {
padding: 7px 15px;
}
/*Start Media query*/
#media (max-width: 768px) {
.form-control {
padding: 6px 100px;
}
}
/*End Of Media query*/
Use bootstrap grid layout classes col-xs-6 for div's instead of block-1, block-2. In your css, set width and height in percentages instead of numbers in px.
Also, try not to set height, instead set width.
Use classes like panel and panel-body in each div.
Put entire content in
<div class="container-fluid">
//Create three rows
<div class="row">
//create 2 divs with class col-xs-6
</div>
<div class="row">
//create 2 divs with class col-xs-6
</div>
<div class="row">
//create 2 divs with class col-xs-6
</div>
</div>
I couldn't add a comment so I'll just compound with Amit's answer. Make sure this
<meta name="viewport" content="width=device-width, initial-scale=1" /> is in your head tags as well. It set you page viewport size to the px size of device. Without it the code Amit suggested won't work. All in all your not actually using any Bootstrap in your code. I would also recommend looking through this to get a true understanding of Bootstrap https://www.w3schools.com/bootstrap
Im trying to make the height of the "mainbar" div stretch the entire page without there being a need for the vertical scrollbar while also making sure I can see the top of the div. when I remove the "margin-top" value from the "mainbar" css it removes the scrollbar but cuts off the top 50px. How would I move the div 50px lower (so I can see all of the content inside of it) without extending the page and adding the scrollbar back?
Here is the html:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="navbar">
<ul>
<li class="nav">Home</li>
<li class="nav">About</li>
<li class="nav">Upload</li>
</ul>
</div>
<div class="mainbar">
<h1>hello</h1>
<h2>whats up</h2>
</div>
</body>
</html>
Here is the css
* {
box-sizing: border-box;
}
body {
background-color: #450068;
background-color: rgb(69, 0, 104);
margin: 0px;
padding: 0px;
}
h1, h2 {
text-align: center;
color: white;
}
li {
display: inline;
text-align: right;
list-style: none;
padding: 20px;
}
.navbar {
background-color: #8729a5;
border-bottom: .5px solid gray;
width: 100%;
height: 50px;
position: fixed;
top: 0;
padding: 0px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.mainbar {
background-color: #8729a5;
background-color: black;
height: 100vh;
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border: .5px solid gray;
border-radius: 15px;
overflow: scroll;
overflow-x: hidden;
}
* {
box-sizing: border-box;
}
body {
background-color: #450068;
background-color: rgb(69, 0, 104);
margin: 0px;
padding: 0px;
}
h1, h2 {
text-align: center;
color: white;
}
li {
display: inline;
text-align: right;
list-style: none;
padding: 20px;
}
.navbar {
background-color: #8729a5;
border-bottom: .5px solid gray;
width: 100%;
height: 45px;
position: fixed;
top: 0;
padding: 0px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
body > .mainbar {
background-color: #8729a5;
background-color: black;
height: 90vh;
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border: .5px solid gray;
border-radius: 15px;
overflow: scroll;
overflow-x: hidden;
overflow-y: auto
}
new slimScroll(Element);
<!DOCTYPEhtml>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="slimscroll.js"></script>
</head>
<body>
<div class="navbar">
<ul>
<li class="nav">Home</li>
<li class="nav">About</li>
<li class="nav">Upload</li>
</ul>
</div>
<div class="mainbar">
<h1>hello</h1>
<h2>whats up</h2>
<h2>whats up</h2>
</div>
</body>
Looked at : https://github.com/kamlekar/slim-scroll
and Hide scroll bar, but still being able to scroll
Not sure if that is what you wanted but the plugin removed the scrollbar on the right of the page >>
So the problem, it seems, is that you have a fixed height for navbar, and want mainbar to take the remainder of the screen.
With mainbar having a height of 100vh it will be as tall as the viewport; so anything you do to move it down 50px will cause the scrollbar to appear. This is the headache of mixing pixel sizes and relative (%, vh/vw) sizes.
If your target browser(s) support modern CSS, a flexbox is the solution to this problem.
If not, the "old way" is to use JavaScript to adjust the size of your mainbar div after the initial CSS-based layout is calculated; a pure CSS solution didn't exist before flexbox.
Try modifing your CSS maybe it will solve the problem.
margin-top to padding-top for the .mainbar.
* {
box-sizing: border-box;
}
body {
background-color: #450068;
background-color: rgb(69, 0, 104);
margin: 0px;
padding: 0px;
}
h1, h2 {
text-align: center;
color: white;
}
li {
display: inline;
text-align: right;
list-style: none;
padding: 20px;
}
.navbar {
background-color: #8729a5;
border-bottom: .5px solid gray;
width: 100%;
height: 50px;
position: fixed;
top: 0;
padding: 0px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.mainbar {
background-color: #8729a5;
background-color: black;
height: 100vh;
width: 1100px;
margin-left: auto;
margin-right: auto;
padding-top: 50px; /* here */
border: .5px solid gray;
border-radius: 15px;
overflow: scroll;
overflow-x: hidden;
}
What I want to achieve is something like this below
And what I am getting is something where there's too much of a gap between the image and the green border.
how do I make it look like the previous image above.
Here's the link to my codepen - codepen link
Here's the code:
.container {
text-align: center;
width: 80%;
}
.first {
background: rgb(0, 30, 58);
color: white;
}
.span1,
.span2 {
font-size: 36px;
font-weight: bold;
}
.span1 {
color: rgb(72, 174, 137);
}
[type="text"] {
border-radius: 25px;
padding-left: 5px;
}
[type="submit"] {
color: white;
background-color: rgb(72, 174, 137);
border-radius: 25px;
position: relative;
margin-left: -25px;
}
.use {
height: 85%;
margin: 0 auto;
}
.box {
border: 3px solid rgb(72, 174, 137);
width: 55%;
margin: 0 auto;
max-height: 210px;
}
.box .img-responsive {
margin-top: -20px;
}
.para {
text-align: left;
margin-right: 0;
padding-right: 0;
padding-top: 15px;
}
.para strong {
font-weight: 900;
font-size: 16px;
}
.second {
margin-bottom: 30px;
border: 1px solid green;
width: 10%;
}
.threebox {
width: 90%;
margin: 0 auto;
padding-left: 70px;
}
.col-lg-4 {
height: 40%;
}
.col-lg-4 > p {
background-color: white;
border: 2px solid white;
border-top-color: green;
width: 200px;
height: 160px;
box-shadow: 10px 10px 15px;
}
.positions {
margin-top: 60px;
position: relative;
margin-bottom: -50px;
z-index: 2;
}
.positions > h1 {
font-size: 30px;
font-weight: bold;
}
.spanf {
font-size: 18px;
font-weight: bold;
}
.features {
text-align: center;
padding-bottom: 40px;
width: 100%;
margin: 0 auto;
background-color: rgb(242, 243, 245);
height: 1500px;
z-index: 1;
padding-top: 120px;
margin-bottom: 0;
}
.features .row {
border: 2px solid red;
width: 65%;
margin: 0 auto;
}
.features .row p {
text-align: left;
padding-left: 20px;
}
.features button {
border-radius: 20px;
}
.features .row {
margin-top: 40px;
}
.features img {
width: 98%;
height: 98%;
}
.features .row .col-lg-6 {
padding-right: 15px;
padding-left: 2px;
}
.imgright {
position: relative;
border: 3px solid rgb(72, 174, 137);
top: 5%;
width: 40%;
padding-bottom: 0px;
padding-right: 2px;
padding-left: 0;
margin-left: 20px;
margin-top: 20px;
}
.img2 {
position: relative;
top: -25px;
left: -20px;
padding-bottom: 10px;
}
.imgleft {
position: relative;
border: 3px solid rgb(72, 174, 137);
width: 40%;
top: 5%;
margin-left: 10px;
margin-top: 20px;
}
.img3 {
position: relative;
top: -20px;
padding-bottom: 10px;
left: 40px;
}
.pillars {
background-color: rgb(72, 174, 137);
height: 350px;
top: 0;
}
This is the CSS after the changes and rest of your CSS will be there.
.features img {
/* width: 98%; */
/* height: 98%; */
left: 12px;
top: -12px;
box-shadow: -2px 2px 9px;
}
.features .row .col-lg-6 {
/* padding-right: 15px; */
/* padding-left: 2px; */
}
.img2 {
position: relative;
/* padding-bottom: 10px; */
}
.imgleft {
position: relative;
border: 3px solid rgb(72, 174, 137);
width: 40%;
top: 5%;
margin-left: 10px;
margin-top: 20px;
padding: 0;
}
.img3 {
position: relative;
left:30px;
/* top:-20px; */
/* padding-bottom: 10px; */
}
here u already defined .img2 and .img3 classes, your result was effecting by these classes just remove those classes then it works fine, check my snippet
.box .img-responsive {
margin-top: -20px;
} and remove margin-top from here
.container {
text-align: center;
width: 80%;
}
.first {
background: rgb(0, 30, 58);
color: white;
}
.span1,
.span2 {
font-size: 36px;
font-weight: bold;
}
.span1 {
color: rgb(72, 174, 137);
}
[type="text"] {
border-radius: 25px;
padding-left: 5px;
}
[type="submit"] {
color: white;
background-color: rgb(72, 174, 137);
border-radius: 25px;
position: relative;
margin-left: -25px;
}
.use {
height: 85%;
margin: 0 auto;
}
.box {
border: 3px solid rgb(72, 174, 137);
width: 55%;
margin: 0 auto;
max-height: 210px;
}
.box .img-responsive {
margin-top: -20px;
}
.para {
text-align: left;
margin-right: 0;
padding-right: 0;
padding-top: 15px;
}
.para strong {
font-weight: 900;
font-size: 16px;
}
.second {
margin-bottom: 30px;
border: 1px solid green;
width: 10%;
}
.threebox {
width: 90%;
margin: 0 auto;
padding-left: 70px;
}
.col-lg-4 {
height: 40%;
}
.col-lg-4 > p {
background-color: white;
border: 2px solid white;
border-top-color: green;
width: 200px;
height: 160px;
box-shadow: 10px 10px 15px;
}
.positions {
margin-top: 60px;
position: relative;
margin-bottom: -50px;
z-index: 2;
}
.positions > h1 {
font-size: 30px;
font-weight: bold;
}
.spanf {
font-size: 18px;
font-weight: bold;
}
.features {
text-align: center;
padding-bottom: 40px;
width: 100%;
margin: 0 auto;
background-color: rgb(242, 243, 245);
height: 1500px;
z-index: 1;
padding-top: 120px;
margin-bottom: 0;
}
.features .row {
border: 2px solid red;
width: 65%;
margin: 0 auto;
}
.features .row p {
text-align: left;
padding-left: 20px;
}
.features button {
border-radius: 20px;
}
.features .row {
margin-top: 40px;
}
.features img {
width: 98%;
height: 98%;
}
.features .row .col-lg-6 {
padding-right: 15px;
padding-left: 2px;
}
.imgright {
position: relative;
border: 3px solid rgb(72, 174, 137);
top: 5%;
width: 40%;
padding-bottom: 0px;
padding-right: 2px;
padding-left: 0;
margin-left: 20px;
margin-top: 20px;
}
.imgleft {
position: relative;
border: 3px solid rgb(72, 174, 137);
width: 40%;
top: 5%;
margin-left: 10px;
margin-top: 20px;
}
.pillars {
background-color: rgb(72, 174, 137);
height: 350px;
top: 0;
}
<div class="container">
<div class="first">
<p>CONVERSIFIC</p>
<p><span class="span1">The 1st</span><br>Business Intelligence Platform<br><span class="span2">for Shopify</span></p>
<p>We show you how to grow your revenue<br><span class="span3">-all you have to do is take action</span></p>
<form>
<input type="text" placeholder="enter your email" name="email">
<input type="submit" name="submit" value="Add me to Beta">
</form>
<p>Join our beta today,be the first to get access to Conversific</p>
</div><!--first div ends -->
<div class="use">
<h1>Why use Conversicif?</h1>
<hr class="firsth">
<div class="box row">
<div class="col-lg-6 images">
<img class="img-responsive " src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph">
</div>
<div class="col-lg-6 para">
<p><strong>Conversific helps you make intelligent decisions to grow your business</strong><br>
There are plentfy of platforms that make it easy to capture data and analytics about your ecommerce site.But when it comes to understanding the data you've captured, it's not always clear what's important and where to make changes.</p>
</div>
</div><!--box div ends -->
<div class="positions">
<h1>How does Conversific work?</h1>
<p>Say goodbye to gathering reports and analyzing data and head straight to decision making </p>
<hr class="second">
<div class="threebox row">
<div class="col-lg-4"><p>Conversific is installed onto your ecommerce store with just one click from your shopify store</p></div>
<div class="col-lg-4"><p>After the installation you just need to install google analytics</p></div>
<div class="col-lg-4"><p>Immediately after you have signed in you see a comprehensive reports overview</p></div>
</div><!--threebox row ends -->
</div><!-- positions div ends-->
</div><!--use div ends -->
<div class="features">
<h1> Features you'll love</h1>
<p>These are the features you are going to love no matter what<br>
So, is this the end of the paragraph or what or are you gonna keep<br>
typing till your fingers bleed??</p>
<div class="row">
<div class="col-lg-6">
<p>ECOMMERCE FOCUS<br><span class="spanf">Decision Focused Dashboards To Supercharge Your Ecommerce Business</span><br>
There are plenty of platforms that make it easy to capture data and analytics about your ecommerce site. But when it comes to understanding the data you've captured. It's not always clear what's important and where to make changes.<br>
<button>Join Now</button></p>
</div>
<div class="col-lg-6 imgright">
<img class="img-responsive img2 " src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph">
</div>
</div><!-- row ends -->
<div class="row">
<div class="col-lg-6 imgleft">
<img class="img-responsive img3" src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph">
</div>
<div class="col-lg-6"><p>EASY TO UNDERSTAND<br><span class="spanf">Optimize Your Product & Category<br> Performance</span><br>
There are plenty of platforms that make it easy to capture data and analytics about your ecommerce site. But when it comes to understanding the data you've captured. It's not always clear what's important and where to make changes.<br>
<button>Join Now</button></p></div>
</div><!-- row ends -->
<div class="row">
<div class="col-lg-6"><p>INCREASE REVENUE<br><span class="spanf">Turbo Boost Your marketing and Find<br> Top Performing Marketing Channels</span><br>
See which marketing channels are the most effective for your business<br>and maximize your return on investment<br>
<button>Join Now</button></p></div>
<div class="col-lg-6 imgright">
<img class="img-responsive img2" src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph">
</div>
</div><!-- row ends -->
<div class="row">
<div class="col-lg-6 imgleft">
<img class="img-responsive img3" src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph">
</div>
<div class="col-lg-6"><p>ECOMMERCE FOCUS<br><span class="spanf">Decision Focused Dashboards To<br> Supercharge Your Ecommerce Business</span><br>
There are plenty of platforms that make it easy to capture data and analytics about your ecommerce site. But when it comes to understanding the data you've captured. It's not always clear what's important and where to make changes.<br>
<button>Join Now</button></p></div>
</div><!-- row ends -->
</div><!-- features div ends -->
<div class="pillars">
<h1>The 4 pillars of Conversific</h1>
<p>Stop wasting time on your decision making process, increase revenue and reduce costs </p>
<hr>
</div><!-- pillars div ends -->
<div class="team"></div>
<div class="end"></div>
</div><!-- container div ends -->
I have an audio player that i built with jquery. The markup and css is relatively simple but I cannot get the progress bar to change width with the width of the whole container.
It is set as a percentage but does not behave as a child of the container div. I am guessing it is something to do with the position being absolute but if i change that the whole thing goes wrong.
Here is the markup
<div class="container gradient">
<div style="width:100px; overflow:hidden; display:inline-block;"><img src="" class="artwork" height="100%"></div>
<div class="name">
<p1><br>
<b></b></p1>
</div>
<div class="logo" style="font-size:12px; text-align:right; font-weight:bold;">
<br>
<br>
</div>
<div class="player gradient">
<a class="controls gradient" id="play" href="" title=""></a>
<input type="range" id="seek" value="0" max=""/>
</div><!-- / player -->
</div><!-- / Container-->
And the css
.gradient {
border: 1px solid #C4C4C4;
background: #F2F2F2;
}
.container {
position: absolute;
width: 100%;
height: 122px;
top: 0%;
left: 0%;
padding: 10px;
.artwork {height:100px; overflow:hidden; margin-left:auto; margin-right:auto;}
.containerLarge {
height: 427px;
}
.name {left:120px; position:absolute; top:7px}
.player {
box-sizing: border-box;
position:absolute;
width:91%;
bottom: 10px;
left:120px;
border-radius: 3px;
padding: 5px;
}
.controls {
border-radius:1em;
background-color:#0485bf;
display: block;
width: 34px;
height: 34px;
background-image: url(../player/src/images/sprite.png);
background-repeat: no-repeat;
float: left;
margin-right: 5px;
}
.controls:hover {background-color:#005b85}
#play {
background-position: 6px 5px;
}
#pause {
background-position: -32px 5px;
}
input[type="range"] {
width: 250px;
margin-top: -5px;
}
#close {
float: right;
background-position: -146px 5px;
display: none;
}
.volume {
position: absolute;
height: 100px;
width: 34px;
border: 1px solid black;
background-color: #242323;
top: -97px;
display: none;
}
input{
display:none\9!important;
}
input[type="range"] {
border: 1px solid #C4C4C4;
position: absolute;
top: 18px;
display: block;
width: 95%;
height: 15px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background-color: #DBDBDB;
left: 50px;
}
input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border:1px solid #C4C4C4;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #0485bf;
}
input::-webkit-slider-thumb: hover {opacity : 0.3;filter: alpha(opacity=30)}
.logo {float:right; }
.embed {width:100%; background-color:black }
The main elements in question are .container, .controls, .player and the input type range.
Hard to see what's going on from the markup. Which element is the progress bar? If something is positioned absolutely and set to 100% width, it will fill fill the width of the screen, rather than its parent element (unless it's parent is set to position:relative).