The circle border on the right side is showing behind the last page on the right.
The circle border on the left side is showing well. How can I fix the right one?
I tried to use z-index for the section and the circle but it doesn't work.
* {
margin: 0;
scroll-behavior: smooth;
}
/*Main settings*/
.slide {
width: 100vw;
height: 100vh;
}
.wrapper {
display: flex;
flex-direction: row;
width: 300vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
}
.one {
background: #151515;
}
.two {
background: #000000;
}
.three {
background: #151515;
}
.four {
background: #00dfdf;
}
.outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
scrollbar-width: none;
-ms-overflow-style: none;
}
::-webkit-scrollbar {
display: none;
}
.circle1 {
float: left;
margin: 13em -11em;
width: 20em;
height: 20em;
border-radius: 100%;
border: solid 0.8em black;
box-shadow: 0 0 0 0.5em white;
outline-offset: 5em;
outline: solid 0.1em rgb(181, 181, 181);
background-image: url("images/2.png");
background-size: cover;
}
.circle2 {
z-index: 99;
float: right;
margin: 13em -5em;
width: 20em;
height: 20em;
border-radius: 100%;
border: solid 0.8em black;
box-shadow: 0 0 0 0.5em white;
outline-offset: 5em;
outline: solid 0.1em rgb(181, 181, 181);
background-image: url("images/2.png");
background-size: cover;
}
<body>
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide one"></div>
<div class="slide two">
<div class="circle1"></div>
<div class="circle2"></div>
</div>
<div class="slide three"></div>
</div>
</div>
</body>
I tried to use z-index but it didn't work.
The simple fix would be to add position: relative to the second circle:
* {
margin: 0;
scroll-behavior: smooth;
}
/*Main settings*/
.slide {
width: 100vw;
height: 100vh;
}
.wrapper {
display: flex;
flex-direction: row;
width: 300vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
}
.one {
background: #151515;
}
.two {
background: #000000;
}
.three {
background: #151515;
}
.four {
background: #00dfdf;
}
.outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
scrollbar-width: none;
-ms-overflow-style: none;
}
::-webkit-scrollbar {
display: none;
}
.circle1 {
float: left;
margin: 13em -11em;
width: 20em;
height: 20em;
border-radius: 100%;
border: solid 0.8em black;
box-shadow: 0 0 0 0.5em white;
outline-offset: 5em;
outline: solid 0.1em rgb(181, 181, 181);
background-image: url("images/2.png");
background-size: cover;
}
.circle2 {
z-index: 99;
float: right;
margin: 13em -5em;
width: 20em;
height: 20em;
border-radius: 100%;
border: solid 0.8em black;
box-shadow: 0 0 0 0.5em white;
outline-offset: 5em;
outline: solid 0.1em rgb(181, 181, 181);
background-image: url("images/2.png");
background-size: cover;
position: relative;
}
<body>
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide one"></div>
<div class="slide two">
<div class="circle1"></div>
<div class="circle2"></div>
</div>
<div class="slide three"></div>
</div>
</div>
</body>
Related
When I resize the page the searchbox starts resizing after the padding of the parent if zero. I want to resize the div with class-"searchbox", with resizing the page not after the parent's padding is off. Here is the code I'll be glad if you correct me anywhere.
.site-wrapper {
max-width: 86.5rem;
min-height: 28rem;
padding: 0 4.3rem;
margin: 0 auto;
overflow: hidden;
}
.navbar {
display: flex;
justify-content: end;
padding-top: 2.7rem;
}
#hamburger-button {
position: relative;
width: 32px;
height: 32px;
border-radius: 4px;
cursor: pointer;
}
#hamburger-button:hover {
background-color: #0000001f;
}
#hamburger {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: none;
background-color: transparent;
background-image: url(/assets/menuicon.svg);
background-repeat: no-repeat;
background-size: contain;
padding: 9.2px;
margin: 0 auto;
cursor: pointer;
}
.header-content {
margin: 0 auto;
}
.header-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.header-content-logo {
margin-top: 5rem;
margin-bottom: 2.3rem;
}
.header-content-logo svg {
width: 12.6rem;
}
.searchbox {
display: flex;
align-items: center;
border-radius: 6px;
width: 100%;
max-width: 38.7rem;
height: 2.7rem;
background-color: #fff;
box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.searchbox:hover {
box-shadow: 0px 6px 20px 6px rgba(0, 0, 0, 0.1);
}
.searchbox input {
width: 92%;
border: none;
background-color: transparent;
font-size: 11.8pt;
font-family: inherit;
padding-left: 1rem;
}
.searchbox input:focus {
outline: none;
}
<div class="site-wrapper">
<div class="navbar">
<div id="hamburger-button">
<button id="hamburger"></button>
</div>
</div>
<div class="header-content">
<div class="header-content-logo">
<svg>
</div>
<div class="searchbox">
<input type="text" placeholder="Search without being tracked">
</div>
</div>
</div>
I have tried putting margin and even making another div before it and putting padding but seems that it didn't make it work. I am out of options.
I'm trying to draw this output with css (or svg). For me, the tough part is the half-arc at the left and right side of the circle. Should I stick to pure css or is it better using images?
Any help is appreciated...
This is what I managed to make :
Here is the code :
body {
background-color: #002911 !important;
}
h3 {
color: #ffd004;
}
#actions-container {
margin-top: 30px;
}
#actions-container .action-icon {
width: 200px;
height: 200px;
background-color: rgb(255, 208, 4);
border-radius: 50%;
box-shadow: 5px -2px 6px 3px #0000004a;
/* center contents*/
display: flex;
justify-content: center;
align-items: center;
}
.right-arc {
position: relative;
display: inline-block;
font-size: 30px;
color: lightgreen;
margin: 40px;
}
.right-arc::after {
content: '';
position: absolute;
right: -150px;
top: 57px;
height: 300px;
width: 300px;
border-radius: 50% 50% 50% 50%;
border-width: 0px 1px 0px 0px;
border-style: solid;
/*border-top: outset;*/
}
/*svg {
width: 33%;
height: auto;
}*/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" id="actions-container">
<div class="d-flex justify-content-between">
<div class="action-icon-box text-center ">
<div class="right-arc">
</div>
<h3 class="text-center">Title</h3>
<div class="p-1 action-icon text-center mt-4">
<img class="center" src="/Content/images/lp-homepage/microphone.png" height="100" />
</div>
</div>
</div>
</div>
You could use a pseudo element with an inset box-shadow to create the fade out border on the bottom like this :
body {
background: #232323;
}
.wrap {
box-sizing: border-box;
position: relative;
width: 50%;
border: 3px solid #ffd004;
border-radius: 50%;
}
.wrap::before {
content:'';
display:block;
padding-bottom:100%;
}
.wrap::after {
content: '';
position: absolute;
bottom: -3px;
left: -3px;
right: -3px;
height: 100%;
z-index: 1;
box-shadow: inset 0px -270px 70px -100px #232323;
}
.title {
color: #ffd004;
margin: 0;
position: absolute;
top: -3px;
left: 0;
width: 100%;
text-align: center;
z-index: 2;
background: #232323;
}
.circle {
position: absolute;
top:15%;
left:15%;
width: 70%;
height: 70%;
border-radius: 50%;
background: #ffd004;
z-index: 2;
}
<div class="wrap">
<h2 class="title">Title</h2>
<div class="circle"></div>
</div>
Be aware that this will only work on plain color background. If you need to display this over a gradient or image, I highly suggest using SVG.
The aspect ratio of the circle is kept using the "padding technique" from this answer : Maintain the aspect ratio of a div with CSS
If you need transparency, you can use a mask-image with a linear-gradient.
/* based on #web-tiki's implementation */
body {
background: #232323;
}
.wrap {
box-sizing: border-box;
position: relative;
width: 50%;
padding: 60px;
}
/* the border */
.wrap::before {
content:"";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 3px solid #ffd004;
border-radius: 50%;
-webkit-mask-image: linear-gradient(transparent 10%, black 10%, transparent 80% );
mask-image: linear-gradient(transparent 10%, black 10%, transparent 80% );
}
/* the circle */
.wrap::after {
content:"";
display:block;
background: #ffd004;
padding-top: 100%;
border-radius: 50%;
box-shadow: 6px 0px 10px black;
}
.title {
color: #ffd004;
margin: 0;
position: absolute;
top: -3px;
left: 0;
right: 0;
text-align: center;
}
body:hover {
/* CSS checkerboard stolen from https://drafts.csswg.org/css-images-4/#example-2de97f53 */
background: repeating-conic-gradient(rgba(0,0,0,0.1) 0deg 25%, white 0deg 50%);
background-size: 2em 2em;
}
<div class="wrap">
<h2 class="title">Title</h2>
</div>
Try this
body {
background-color: #002911 !important;
}
h3 {
color: #ffd004;
}
#actions-container {
margin-top: 30px;
}
#actions-container .action-icon {
width: 200px;
height: 200px;
background-color: rgb(255, 208, 4);
border-radius: 50%;
box-shadow: 5px -2px 6px 3px #0000004a;
/* center contents*/
display: flex;
justify-content: center;
align-items: center;
}
.action-icon-box{
position: relative;
}
#actions-container .action-icon-box::after,#actions-container .action-icon-box::before{
position: absolute;
content: '';
width: 300px;
height:300px;
border-radius: 50%;
z-index:-1;
top:0px;
border: 2px solid;
border-color:transparent;
}
#actions-container .action-icon-box::before{
border-right-color: green;
right: -60px;
}
#actions-container .action-icon-box::after{
border-left-color: green;
left: -60px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="actions-container">
<div class="d-flex justify-content-between">
<div class="action-icon-box text-center ">
<h3 class="text-center">Title</h3>
<div class="p-1 action-icon text-center mt-4">
<img class="center" src="/Content/images/lp-homepage/microphone.png" height="100" />
</div>
</div>
</div>
</div>
I have a horizontal bar that has 4 items or maybe more. What I am trying to do is that when the browser is resized each item of the horizontal bar with its respective element, however, I am using twitter-bootstrap 4, but it doesn't seem to work either by default
.post-content-wrapper {
padding: 20px;
margin-bottom: 2em;
position: relative;
max-width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #f7f7f7;
border-radius: 7px;
box-sizing: border-box;
}
.flex7 {
display: flex;
height: 300px;
justify-content: space-between;
align-items: flex-end;
}
.flex {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
}
.flex7-child-1 {
height: 40%;
position: relative;
}
.flex7-child-1:before {
content: '';
position: absolute;
background-image: url('https://via.placeholder.com/50.png');
background-repeat: none;
background-position: center center;
background-size: contain;
top: -60px;
left: 0;
right: 0;
margin: 0 auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-2:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 88px;
left: -170px;
right: 0;
margin: 24px auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-3:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 85px;
left: 0;
right: 0;
margin: 0 auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-4:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 85px;
left: 170px;
right: 0;
margin: 106px auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-5:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 58px;
left: 166px;
right: -174px;
margin: 106px auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child {
width: 14%;
}
.child {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
}
.flex7-child-2 {
height: 50%;
}
.flex7-child-3 {
height: 60%;
}
.flex7-child-4 {
height: 20%;
}
.flex7-child-5 {
height: 30%;
}
<div class="post-content-wrapper">
<div class="flex flex7">
<div class="child flex7-child flex7-child-1"></div>
<div class="child flex7-child flex7-child-2"></div>
<div class="child flex7-child flex7-child-3"></div>
<div class="child flex7-child flex7-child-4"></div>
<div class="child flex7-child flex7-child-5"></div>
</div>
</div>
before toggle
after toggle, I am expecting to have the same position even when I resize the layout without breaking the elements
Here's a better way to achieve responsive consistent styles for your horizontal bars. Note that individual styles for each .flex7-child-#:before has been removed, and all .flex7-child elements now use flexbox.
.post-content-wrapper {
padding: 20px;
margin-bottom: 2em;
position: relative;
max-width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #f7f7f7;
border-radius: 7px;
box-sizing: border-box;
}
.flex7 {
display: flex;
height: 300px;
justify-content: space-between;
align-items: flex-end;
}
.flex {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
}
/* Pay attention to below */
.flex7-child {
display: flex;
flex-direction: row;
justify-content: center;
}
.flex7-child:before {
content: '';
position: relative;
background-image: url('https://via.placeholder.com/50.png');
background-repeat: none;
background-position: center center;
top: -70px;
background-size: contain;
display: block;
width: 50px;
height: 50px;
}
/* Pay attention to above */
.flex7-child {
width: 14%;
}
.child {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
}
.flex7-child-1 {
height: 40%;
}
.flex7-child-2 {
height: 50%;
}
.flex7-child-3 {
height: 60%;
}
.flex7-child-4 {
height: 20%;
}
.flex7-child-5 {
height: 30%;
}
This isn't an exact example, but I would wrap your thumbnails and bars together something like this:
#container{
margin: auto;
width: 800px;
height: 400px;
border: 3px solid gainsboro;
border-radius: 5px;
display: flex;
justify-content: space-around;
}
.flex-item{
height: 100%;
display: flex;
flex-direction: column-reverse;
}
.flex-item > .bar{
border-radius: 5px;
width: 80px;
background-color: mediumpurple;
border: 1px solid blue;
margin-top: 10px;
}
.flex-item:after{
display: block;
content: '';
height: 80px;
width: 80px;
background-image: url("https://via.placeholder.com/80.png")
}
<div id="container">
<div class="flex-item">
<div class="bar" style="height:40%"></div>
</div>
<div class="flex-item">
<div class="bar" style="height:20%"></div>
</div>
<div class="flex-item">
<div class="bar" style="height:60%"></div>
</div>
<div class="flex-item">
<div class="bar" style="height:50%"></div>
</div>
<div class="flex-item">
<div class="bar" style="height:70%"></div>
</div>
</div>
I am trying to add a horizontal scroll onto a page so that when you scroll vertically, the page scrolls horizontally. I found a piece of code that can do this which is entirely CSS based however it doesn't seem to be responsive. I found this on CodePen.
Is there any way in which this code can be transformed into the page being responsive?
I've attached the code below.
#container {
margin-top: -15px;
}
#container .box {
width: 100vw;
height: 100vh;
display: inline-block;
position: relative;
}
#container .box>div {
width: 100%;
height: 100%;
font-size: 96px;
color: #FFF;
position: absolute;
top: 5%;
left: 2.6%;
margin: -50px 0 0 -50px;
line-height: .7;
font-weight: bold;
}
#container {
overflow-y: scroll;
overflow-x: hidden;
transform: rotate(270deg) translateX(-100%);
transform-origin: top left;
background-color: #999;
position: absolute;
width: 100vh;
height: 100vw;
}
#container2 {
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
white-space: nowrap;
font-size: 0;
}
.one {
background-color: #45CCFF;
}
.two {
background-color: #49E83E;
}
.three {
background-color: #EDDE05;
}
.four {
background-color: #E84B30;
}
<div id="container">
<div id="container2">
<div class="box one">
<div class="full">
<img class="desktop" src="public/images/lookbook/4.jpg" alt="Header" />
</div>
</div>
<div class="box two">
<div>2</div>
</div>
<div class="box three">
<div>3</div>
</div>
<div class="box four">
<div>Last</div>
</div>
</div>
</div>
If anyone has any idea - please let me know!
I took the initiative to remove all those ugly white spaces and scroll bars, plus what you asked for: Codepen
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
#container {
width: calc(100vh + 17px);
height: 100vw;
margin-top: -17px;
margin-right: 100px;
overflow-y: scroll;
overflow-x: hidden;
transform: rotate(270deg) translateX(-100%);
transform-origin: top left;
background-color: #999;
position: absolute;
}
#container2 {
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
white-space: nowrap;
font-size: 0;
}
#container .box {
width: 100vw;
height: 100vh;
display: inline-block;
position: relative;
}
#container .box > div {
font-size: 96px;
color: #FFF;
position: absolute;
top: 0;
left: 0;
margin: 0;
line-height: 0.9;
font-weight: bold;
}
.full {
height: 100%;
width: 100%;
position: relative;
}
.desktop {
width: 100%;
height: 100%;
display: block;
position: absolute;
background-size: cover;
}
.one {background-color: #45CCFF;}
.two {background-color: #49E83E;}
.three {background-color: #EDDE05;}
.four {background-color: #E84B30;}
Here is the code you want, use the image as a background instead. This allows it to cover the div completely as you'd like it to. Whilst also being responsive.
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
#container .box {
width: 100vw;
height: 100vh;
display: inline-block;
position: relative;
background-size: cover;
}
#container .box>div {
width: 100%;
height: 100%;
font-size: 96px;
color: #FFF;
position: absolute;
top: 5%;
margin: 20px 0px 0px;
line-height: .7;
font-weight: bold;
}
#container {
overflow-y: scroll;
overflow-x: hidden;
transform: rotate(270deg) translateX(-100%);
transform-origin: top left;
background-color: #999;
position: absolute;
width: 100vh;
height: 100vw;
}
#container2 {
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
white-space: nowrap;
font-size: 0;
}
.one {
background-color: #45CCFF;
background-image: url(https://images.pexels.com/photos/1022454/pexels-photo-1022454.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}
.two {
background-color: #49E83E;
background-image: url(https://images.pexels.com/photos/1023949/pexels-photo-1023949.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}
.three {
background-color: #EDDE05;
background-image: url(https://images.pexels.com/photos/963071/pexels-photo-963071.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}
.four {
background-color: #E84B30;
background-image: url(https://images.pexels.com/photos/1022928/pexels-photo-1022928.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}
<div id="container">
<div id="container2">
<div class="box one">
<div class="full">
<div>1</div>
</div>
</div>
<div class="box two">
<div>2</div>
</div>
<div class="box three">
<div>3</div>
</div>
<div class="box four">
<div>Last</div>
</div>
</div>
</div>
Despite setting properties, the text inside the circle won't move to the exact centre and the radial graph itself won't move to the centre of the div it is inside. Does anyone what's wrong and how to fix this?
/**
* Card Styles
*/
.card {
background-color: #fff;
/* margin-bottom: 1.6rem; */
}
.card__padding {
padding: 1.2rem;
}
.card__content {
position: relative;
}
/* card article */
.card__article a {
text-decoration: none;
color: black;
}
.card__article p {
text-align: center;
text-decoration: none;
color: black;
}
/*radial progress bar*/
.pie-wrapper {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
margin-left: 50%;
border: 10px solid #ddd;
border-radius: 50%;
margin: 0 auto;
}
.pie-wrapper .pie {
clip: rect(0, 200px, 200px, 0px);
height: 200px;
width: 200px;
margin: -10px 0 0 -10px;
}
.pie-wrapper .pie .half-circle {
border: 10px solid #3498db;
clip: rect(0, 100px, 200px, 0);
height: 200px;
position: absolute;
width: 200px;
border-radius: 50%;
}
.pie-wrapper .label {
position: absolute;
top: 12.5%;
right: 1%;
width: 180px;
height: 180px;
color: black;
cursor: default;
font-size: 2em;
line-height: 2.5em;
border-radius: 50%;
}
.pie-wrapper .shadow {
width: 100%;
height: 100%;
border: 20px solid #bdc3c7;
border-radius: 50%;
}
.pie-wrapper.progress-full .pie {
clip: inherit;
}
.pie-wrapper.progress-full .pie .right-side {
display: block;
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
transform: rotate(220deg);
}
div,
div:before,
div:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
<div class="card radius shadowDepth1">
<div class="card__content card__padding">
<article class="card__article">
<h2>Hello world</h2>
<div class="pie-wrapper progress-full">
<span class="label">2017</span>
<div class="pie">
<div class="left-side half-circle"></div>
<div class="right-side half-circle"></div>
</div>
</div>
<p>Bounjour, tout le monde</p>
</article>
</div>
</div>
add text-align: center; to card class
/**
* Card Styles
*/
.card {
background-color: #fff;
text-align: center;
/* margin-bottom: 1.6rem; */
}
.card__padding {
padding: 1.2rem;
}
.card__content {
position: relative;
}
/* card article */
.card__article a {
text-decoration: none;
color: black;
}
.card__article p {
text-align: center;
text-decoration: none;
color: black;
}
/*radial progress bar*/
.pie-wrapper {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
margin-left: 50%;
border: 10px solid #ddd;
border-radius: 50%;
margin: 0 auto;
}
.pie-wrapper .pie {
clip: rect(0, 200px, 200px, 0px);
height: 200px;
width: 200px;
margin: -10px 0 0 -10px;
}
.pie-wrapper .pie .half-circle {
border: 10px solid #3498db;
clip: rect(0, 100px, 200px, 0);
height: 200px;
position: absolute;
width: 200px;
border-radius: 50%;
}
.pie-wrapper .label {
position: absolute;
top: 12.5%;
right: 1%;
width: 180px;
height: 180px;
color: black;
cursor: default;
font-size: 2em;
line-height: 2.5em;
border-radius: 50%;
}
.pie-wrapper .shadow {
width: 100%;
height: 100%;
border: 20px solid #bdc3c7;
border-radius: 50%;
}
.pie-wrapper.progress-full .pie {
clip: inherit;
}
.pie-wrapper.progress-full .pie .right-side {
display: block;
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
transform: rotate(220deg);
}
div,
div:before,
div:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
<div class="card radius shadowDepth1">
<div class="card__content card__padding">
<article class="card__article">
<h2>Hello world</h2>
<div class="pie-wrapper progress-full">
<span class="label">2017</span>
<div class="pie">
<div class="left-side half-circle"></div>
<div class="right-side half-circle"></div>
</div>
</div>
<p>Bounjour, tout le monde</p>
</article>
</div>
</div>
.pie-wrapper .label {
margin: auto;
position: absolute;
top: 30%;
right: auto;
left: 2px;
width: 180px;
height: 180px;
color: black;
cursor: default;
font-size: 2em;
line-height: 2.5em;
border-radius: 50%;
}
.card {
background-color: #fff;
/* margin-bottom: 1.6rem; */
text-align:center;
}
/**
* Card Styles
*/
.card {
background-color: #fff;
/* margin-bottom: 1.6rem; */
text-align:center;
}
.card__padding {
padding: 1.2rem;
}
.card__content {
position: relative;
}
/* card article */
.card__article a {
text-decoration: none;
color: black;
}
.card__article p {
text-align: center;
text-decoration: none;
color: black;
}
/*radial progress bar*/
.pie-wrapper {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
margin-left: 50%;
border: 10px solid #ddd;
border-radius: 50%;
margin: 0 auto;
}
.pie-wrapper .pie {
clip: rect(0, 200px, 200px, 0px);
height: 200px;
width: 200px;
margin: -10px 0 0 -10px;
}
.pie-wrapper .pie .half-circle {
border: 10px solid #3498db;
clip: rect(0, 100px, 200px, 0);
height: 200px;
position: absolute;
width: 200px;
border-radius: 50%;
}
.pie-wrapper .label {
margin: auto;
position: absolute;
top: 30%;
right: auto;
left: 2px;
width: 180px;
height: 180px;
color: black;
cursor: default;
font-size: 2em;
line-height: 2.5em;
border-radius: 50%;
}
.pie-wrapper .shadow {
width: 100%;
height: 100%;
border: 20px solid #bdc3c7;
border-radius: 50%;
}
.pie-wrapper.progress-full .pie {
clip: inherit;
}
.pie-wrapper.progress-full .pie .right-side {
display: block;
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
transform: rotate(220deg);
}
div,
div:before,
div:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
<div class="card radius shadowDepth1">
<div class="card__content card__padding">
<article class="card__article">
<h2>Hello world</h2>
<div class="pie-wrapper progress-full">
<span class="label">2017</span>
<div class="pie">
<div class="left-side half-circle"></div>
<div class="right-side half-circle"></div>
</div>
</div>
<p>Bounjour, tout le monde</p>
</article>
</div>
</div>
My solution involves the below CSS changes.
.card__article{
text-align:center;
}
.pie-wrapper {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
margin-left: 50%;
border: 10px solid #ddd;
border-radius: 50%;
margin: 0 auto;
text-align:center;
}
.pie-wrapper .label {
position: absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
color: black;
cursor: default;
font-size: 2em;
line-height: 180px;
border-radius: 50%;
}
First you can just set text-align:center to center the contents. Second I positioned the text inside using position:absolute and made it take the full dimensions of the parent, by setting top,right,bottom,left to 0px, then by setting the CSS property line-height to the inner height of the parent (excluding borders) 180px we can center the contents!
/**
* Card Styles
*/
.card {
background-color: #fff;
/* margin-bottom: 1.6rem; */
}
.card__padding {
padding: 1.2rem;
}
.card__content {
position: relative;
}
/* card article */
.card__article{
text-align:center;
}
.card__article a {
text-decoration: none;
color: black;
}
.card__article p {
text-align: center;
text-decoration: none;
color: black;
}
/*radial progress bar*/
.pie-wrapper {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
margin-left: 50%;
border: 10px solid #ddd;
border-radius: 50%;
margin: 0 auto;
text-align:center;
}
.pie-wrapper .pie {
clip: rect(0, 200px, 200px, 0px);
height: 200px;
width: 200px;
margin: -10px 0 0 -10px;
}
.pie-wrapper .pie .half-circle {
border: 10px solid #3498db;
clip: rect(0, 100px, 200px, 0);
height: 200px;
position: absolute;
width: 200px;
border-radius: 50%;
}
.pie-wrapper .label {
position: absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
color: black;
cursor: default;
font-size: 2em;
line-height: 180px;
border-radius: 50%;
}
.pie-wrapper .shadow {
width: 100%;
height: 100%;
border: 20px solid #bdc3c7;
border-radius: 50%;
}
.pie-wrapper.progress-full .pie {
clip: inherit;
}
.pie-wrapper.progress-full .pie .right-side {
display: block;
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
transform: rotate(220deg);
}
div,
div:before,
div:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
<div class="card radius shadowDepth1">
<div class="card__content card__padding">
<article class="card__article">
<h2>Hello world</h2>
<div class="pie-wrapper progress-full">
<span class="label">2017</span>
<div class="pie">
<div class="left-side half-circle"></div>
<div class="right-side half-circle"></div>
</div>
</div>
<p>Bounjour, tout le monde</p>
</article>
</div>
</div>