I would like to layer multiple DIVs on top of one another while using flexbox to vertically and horizontally center them both.
In the example below, I would like both .whitebox and .bluebox to be vertically and horizontally centered inside of the container, overlapping one another. Currently .whitebox is positioned with absolute position. Is this possible?
.container {
height: 16px;
width: 16px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
</div>
No need to position the top and left. Just applying absolute positioning is enough because that "pops" the elements into their own layers, so they can be placed at will without affecting other elements in that layer. Once you do that, the align-items and justify-content will do their jobs.
.container {
height: 16px;
width: 16px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
}
.border {
height: 16px;
width: 16px;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
<div class="border"></div>
</div>
You can just remove the offsets like below, it will get the small box centered with the existing rules you set on everything else.
.whitebox {
...
/* top: 0; */
/* left: 0; */
}
Edit: The above works in Chrome, but doesn't seem to be working in Firefox.
In fact, I would simplify the entire code as follows. It should work everywhere where flexbox is supported.
.bluebox {
display: flex;
align-items: center;
justify-content: center;
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
}
<div class="bluebox">
<div class="whitebox"></div>
</div>
I would rather use the usual method for centering: The container gets position: relative and defined width and height, the elements to-be-centered inside the container get this CSS:
.centered-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Plus z-index values for the order in which they are above each other, and possibly opacity so they all can be seen simultaneously...
So in your example, that would be
.container {
height: 16px;
width: 16px;
background-color: white;
border-radius: 4px;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
</div>
The flexbox properties are superfluous when you do it this way.
Set your divs up like this:
<div class="parent">
<div class="wrapper">
<div class="whitebox"></div>
<div class="bluebox"></div>
</div>
</div>
Then apply this css:
.parent{
display: flex;
align-items: center;
justify-content: center;
}
.wrapper{
position:relative
}
.whitebox, .bluebox{
position:absolute;
top:0;
left:0;
}
You can use margin-left and margin-top because you know the height and width of your element.
Explanation:
Move your element from top 50% and from left 50%.
Move your element 4px from right and 4px from bottom.
.container {
height: 16px;
width: 16px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px
}
.border {
height: 16px;
width: 16px;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
<div class="border"></div>
</div>
Related
Currently, I'm creating a simple video player to practice. But, I'm facing something that I never saw before, something that I tried for hours find a way to fix but I didn't make it.
Here is my code =>
var left = document.getElementById('core').getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;
window.onmousemove = function (e) {
let x = ((e.clientX + window.pageXOffset) - left);
document.getElementById("thumbnail").style.left = (x + "px");
}
body {
overflow: hidden;
}
.container {
width: 100%;
max-width: 800px;
position: relative;
background-color: blue;
height: 200px;
overflow: hidden;
}
.core {
margin: 0;
display: flex;
position: absolute;
bottom: 4px;
width: 100%;
flex-wrap: nowrap;
height: auto;
}
#time {
font-size: 14px;
text-shadow: 0 1px 1px rgb(0 0 0 / 15%);
color: #fff;
align-self: center;
align-items: flex-start;
margin: 0 12px;
min-width: 45px;
text-align: center;
}
#progressZone {
width: 100%;
background-color: green;
position: relative;
}
#progress{
z-index: 1;
border-radius: 8px;
height: 2px;
width: 100%;
outline: none;
position: absolute;
top: 0;
bottom: 0;
appearance: none;
-webkit-appearance: none;
margin: auto;
background: transparent;
margin-right: 10px;
}
.thumbnail {
display: none;
z-index: 1;
position: absolute;
bottom: 30px;
right: auto;
margin: 0;
width: 12em;
height: 7em;
background: rgb(200, 200, 200);
pointer-events: none;
padding: 2px 2px;
transform: translateX(-50%);
left: 50%;
}
.thumbnail::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
border: 8px solid transparent;
border-top: 8px solid rgb(200, 200, 200);
transform: translateY(-19%);
}
#progress:hover + .thumbnail {
display: block;
}
<div class="container">
<div id="core" class="core">
<div id="time">01:14:28</div>
<div id="progressZone">
<input id="progress" class="range" type='range' min="0" max="100" step="0.01" value="0">
<div id="thumbnail" class="thumbnail"></div>
</div>
</div>
</div>
The problem is: when I hover the input bar, I'm getting wrong hovered position. After of many hours trying discover why this is happenning, I figured out that #time is, indirectly, causing this. The presence of #time is making the input bar probably show the wrong hover time. But I can't remove #time and I need the code in this structure, with divs wrapped. If you remove #time and test the code, you will see that the hover position will be correct.
Here is a screenshot of what I expect to happen =>
image (I cant yet add embed images)
I suspect that this is something related to flex property, and about position as well. But I tried everything to fix this and got no sucess. Could you please, help me understand or fix this?
Also, here is the jsfiddle link if you want => https://jsfiddle.net/9qvLd35a/
Thank you very much.
In your javascript you take the left-value from the entire core-div. But you only need the value from the progressZone. So you can just adjust it like this: var left = document.getElementById('progressZone').getBoundingClientRect() ...
var left = document.getElementById('progressZone').getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;
window.onmousemove = function (e) {
let x = ((e.clientX + window.pageXOffset) - left);
document.getElementById("thumbnail").style.left = (x + "px");
}
body {
overflow: hidden;
}
.container {
width: 100%;
max-width: 800px;
position: relative;
background-color: blue;
height: 200px;
overflow: hidden;
}
.core {
margin: 0;
display: flex;
position: absolute;
bottom: 4px;
width: 100%;
flex-wrap: nowrap;
height: auto;
}
#time {
font-size: 14px;
text-shadow: 0 1px 1px rgb(0 0 0 / 15%);
color: #fff;
align-self: center;
align-items: flex-start;
margin: 0 12px;
min-width: 45px;
text-align: center;
}
#progressZone {
width: 100%;
background-color: green;
position: relative;
}
#progress{
z-index: 1;
border-radius: 8px;
height: 2px;
width: 100%;
outline: none;
position: absolute;
top: 0;
bottom: 0;
appearance: none;
-webkit-appearance: none;
margin: auto;
background: transparent;
margin-right: 10px;
}
.thumbnail {
display: none;
z-index: 1;
position: absolute;
bottom: 30px;
right: auto;
margin: 0;
width: 12em;
height: 7em;
background: rgb(200, 200, 200);
pointer-events: none;
padding: 2px 2px;
transform: translateX(-50%);
left: 50%;
}
.thumbnail::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
border: 8px solid transparent;
border-top: 8px solid rgb(200, 200, 200);
transform: translateY(-19%);
}
#progress:hover + .thumbnail {
display: block;
}
<div class="container">
<div id="core" class="core">
<div id="time">01:14:28</div>
<div id="progressZone">
<input id="progress" class="range" type='range' min="0" max="100" step="0.01" value="0">
<div id="thumbnail" class="thumbnail"></div>
</div>
</div>
</div>
And as far as I can see it, this should have solved the issue. I hope I got your problem right :)
I am trying to add text that is aligned with a pseudo-element on a div. For reference, I am talking about the .div2::before in my code as that is the dashed line between the inner and outer circle. I want to add a label that says "Wall Thickness" as shown below. The text should adjust with the circle size as the inner/outer circle size will be increasing/decreasing but the text position should adapt. What is the best way to accomplish this?
jsFiddle: https://jsfiddle.net/Kaevonz/cjpkxg6L/6/
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
height: 500px;
border: 1px solid gray;
}
.elem {
box-sizing: border-box;
}
.div1 {
border-top: 3px solid #0DA8AA;
border-left: 1px solid #0DA8AA;
border-right: 1px solid #0DA8AA;
height: 60px;
width: 150px;
background: white;
}
.div2 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 340px;
height: 340px;
background: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.div2::before {
content: '';
position: absolute;
left: 0;
top: 50% - 0.5px;
width: 50%;
height: 1px;
border-top: 0.5px dashed black;
transform: translateY(-50%) rotate(45deg);
transform-origin: right center;
}
.div3 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 120px;
height: 120px;
background: white;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1;
}
.div4 {
border-top: 0.5px dashed black;
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
.div5 {
border: 0.5px dashed black;
width: 150px;
height: 50px;
position: absolute;
top: 0;
transform: translateX(-50%);
left: 50%;
float: left;
}
<div class="container">
<div class="elem div1"></div>
<div class="elem div2">
<div class="elem div3">
<div class="elem div5">
</div>
<div class="elem div4">
</div>
</div>
</div>
</div>
We need two elements within each other. Since we can't do that with pseudo elements, we need to add one element to the markup.
The newly added element will serve as a reference for where the text should be placed, so we align it exactly the same way as we would the first pseudo element.
And finally we use a child element or preferably a pseudo element for the text.
Note: for pseudo elements, text can be added via attributes.
DEMO
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
height: 500px;
border: 1px solid gray;
}
.elem {
box-sizing: border-box;
}
.div1 {
border-top: 3px solid #0DA8AA;
border-left: 1px solid #0DA8AA;
border-right: 1px solid #0DA8AA;
height: 60px;
width: 150px;
background: white;
}
.div2 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 340px;
height: 340px;
background: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.div2::before {
content: '';
position: absolute;
left: 0;
top: 50% - 0.5px;
width: 50%;
height: 1px;
border-top: 0.5px dashed black;
transform: translateY(-50%) rotate(45deg);
transform-origin: right center;
}
.div3 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 120px;
height: 120px;
background: white;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1;
}
.div4 {
border-top: 0.5px dashed black;
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
.div5 {
border: 0.5px dashed black;
width: 150px;
height: 50px;
position: absolute;
top: 0;
transform: translateX(-50%);
left: 50%;
float: left;
}
/* NEW */
.text {
height: 1px;
position: absolute;
left: 0;
top: 50%;
width: 50%;
transform: translateY(-50%) rotate(45deg) translateX(-20%);
transform-origin: right center;
}
.text:before {
content: 'WE HAVE TEXT, lots of it';
transform: translateY(-50%) rotate(-135deg);
position: absolute;
right: 100%;
writing-mode: vertical-rl;
height: 100px;
/* height as width */
}
/* Preview */
.div2 {
animation: x 1s linear alternate infinite;
}
#keyframes x {
from {
height: 300px;
width: 300px;
}
to {
height: 450px;
width: 450px;
}
}
<div class="container">
<div class="elem div1"></div>
<div class="elem div2">
<div class="text"></div> <!-- NEW -->
<div class="elem div3">
<div class="elem div5">
</div>
<div class="elem div4">
</div>
</div>
</div>
</div>
I had to do some text alignment magic, which may or may not be optimal, but at this point I believe the idea is passed across.
This question already has answers here:
Break long word with CSS
(6 answers)
Closed 2 years ago.
The div element which the text is written for is bounded, but the text still extends the boundaries instead of going to the next line. How do I prevent this by not manually inserting <br>s?
Codepen
document.getElementById('commentContent').innerHTML = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
.div-modal{
width: 100%;
height: 100%;
/* size: 10rem; */
overflow: hidden; /* anything in it will not surpass this div's dimensions */
background-color: rgba(0, 0, 0, 0.7);
position: fixed; /* to make it relative to the browser window*/
top: 0;
display: flex;
/* display: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); */
justify-content: center;
align-items: center;
filter: blur(0px);
}
.div-content{
background-color: #f4f4f4;
width: 600px;
height: 550px;
border-radius: 6px;
text-align: center;
padding: 18px;
padding-top: 13px;
margin-top: 0px;
position: absolute; /* controlling the position of it with top/left/right/bottom to make it fit*/
top: 30px;
}
#commentContent{
margin: 30px;
margin-top: 50px;
margin-right: 50px;
height: 300px;
justify-content: center;
align-items: center;
}
<div class="div-modal" id="commentModal">
<div class="div-content">
<span class="closeBtn" id="closeBtnComment">×</span>
<p id="comments"></p>
<div id="commentContent">
</div>
</div>
</div>
Consider using spaces, or use word-wrap:break-word
document.getElementById('commentContent').innerHTML = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
.div-modal{
width: 100%;
height: 100%;
/* size: 10rem; */
overflow: hidden; /* anything in it will not surpass this div's dimensions */
background-color: rgba(0, 0, 0, 0.7);
position: fixed; /* to make it relative to the browser window*/
top: 0;
display: flex;
/* display: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); */
justify-content: center;
align-items: center;
filter: blur(0px);
}
.div-content{
background-color: #f4f4f4;
width: 600px;
height: 550px;
border-radius: 6px;
text-align: center;
padding: 18px;
padding-top: 13px;
margin-top: 0px;
position: absolute; /* controlling the position of it with top/left/right/bottom to make it fit*/
top: 30px;
}
#commentContent{
margin: 30px;
margin-top: 50px;
margin-right: 50px;
height: 300px;
justify-content: center;
align-items: center;
word-wrap:break-word
}
<div class="div-modal" id="commentModal">
<div class="div-content">
<span class="closeBtn" id="closeBtnComment">×</span>
<p id="comments"></p>
<div id="commentContent">
</div>
</div>
</div>
I solved it like this:
#commentContent{
margin: 30px;
margin-top: 50px;
margin-right: 50px;
height: 300px;
word-break: break-word;
text-align: left;
}
Here, 'word-break' will break the long lines inside the inner div("#commentContent").
• You can use text-align: Left for aligning the inside contents, instead of using:
justify-content: center;
align-items: center;
I have this piece of code that has the profile card in the middle of screen regardless what the screen size is. It often appears too small for any type of screen. How can I position the profile card to almost fill the screen?
#import url("https://fonts.googleapis.com/css?family=Montserrat");
#import url("https://fonts.googleapis.com/css?family=Open+Sans");
body, html {
width: 100%;
height: 100%;
font-family: "Montserrat";
color: #303633;
background-color: #C8D9E7;
overflow: hidden;
font-size: 1em;
font-style: normal;
-webkit-appearance: none;
outline: none;
text-rendering: geometricPrecision;
perspective: 1000px;
}
a {
position: relative;
display: inline-block;
padding: 12px 35px;
margin: 0 0 20px;
background-color: #e1306c;
color: white;
border-radius: 5px;
transition: all 0.3s;
letter-spacing: 2px;
font-size: 0.85em;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 2px 30px rgba(225, 48, 108, 0.4);
}
a:hover {
background-color: #e75d8c;
}
.content-wrapper {
width: 300px;
max-height: 530px;
border-radius: 5px;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
background: #fbfcee;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: scroll;
overflow-x: hidden;
text-align: center;
}
.content-wrapper .img {
width: 302px;
height: 350px;
position: relative;
overflow: hidden;
}
.content-wrapper img {
/*
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
object-fit: contain;
*/
width: 100%;
height: 100%;
object-fit: cover;
}
.profile--info {
text-align: left;
padding-top: 10px;
}
.profile--info span {
font-family: "Open Sans", "Adobe Blank";
z-index: 1;
left: 15px;
top: 15px;
font-size: 0.575em;
color: rgba(84, 95, 89, 0.75);
display: block;
}
.profile--info span.username {
font-weight: 700;
font-style: normal;
font-size: 1em;
color: black;
}
.profile--info span.userquote {
margin-top: -15px;
font-size: 0.7em;
color: rgba(84, 95, 89, 0.75);
}
.user {
background-color: white;
width: 100%;
margin-top: 0;
max-height: 600px;
position: relative;
padding: 0 30px;
box-sizing: border-box;
}
.user-social-wrapper {
display: flex;
justify-content: space-around;
position: relative;
padding: 5px 0;
padding-bottom: 15px;
}
.user-social-wrapper .user-info {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-weight: 200;
flex: 1 1;
}
.user-social-wrapper .user-info span:first-child {
font-size: 1.25em;
}
.user-social-wrapper .user-info span:last-child {
font-size: 0.75em;
color: rgba(84, 95, 89, 0.75);
}
.shots {
width: calc(100% + 60px);
margin-left: -30px;
position: relative;
display: flex;
flex-wrap: wrap;
}
.shots .shot {
overflow: hidden;
position: relative;
width: 100px;
height: 100px;
}
.shots .shot img {
transition: all 0.255s;
width: 102px;
}
<div class="content-wrapper">
<div class="user">
<div class="shots">
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fcc951ea7fb4756657e6a7d042bf28f3/5CB41E95/t51.2885-15/e35/44305549_353634695394272_4379074065337998962_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMjA0MDQ0OTAyMTY1Njc4Mg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/cc7f49ae37334eff4a2e844ffbebaa21/5CB841C6/t51.2885-15/e35/41336764_2309590515939856_3014107714986624367_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg3Nzg1Mjk1Njk0NDkwNTAwMg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/d8b9d0e098128aad6eac6c39c19439cb/5CD059B2/t51.2885-15/e35/46699770_789255231412285_7247415646102729111_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkyMjcyMTIwOTQyODk0Mjc5NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/a0efc75790b1d1a20306b4b9ee8c0d31/5C9D1D98/t51.2885-15/e35/42593422_668756993510074_548785136612309253_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4MjI5MDk5MzYyODEwOTk0Mw%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fa49d4e551525ac7a288784e0866f7cf/5CD53EA6/t51.2885-15/e35/44442144_2039456152959656_8454847146314760657_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMTEwMTUwMTEzOTEzMzk4MA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/845ad7174d012da1d1b62ac375d2b466/5CD46203/t51.2885-15/e35/43816352_986229031581012_2433270463824730761_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg5NTQwODg2MDE5NjA5OTA1NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/7d4877bc850a66d5aeb539c5510add7e/5C9BD445/t51.2885-15/e35/43621864_2280294755587222_1177965970195440793_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NjY0MTkwODQ0MTE4MDcyOQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/5252d016bae25d4ef4bca9e0c0a0306b/5CCFD742/t51.2885-15/e35/42927631_265838184102659_8658034749053379565_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxNjkzMDk2MDM3NTMwNTUzOA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/880acf9db110584cb44b3b69ad0a366f/5CB3E901/t51.2885-15/e35/41866047_1814622118587789_2219135764187038727_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NDI5OTEwNzU1ODU4OTEzMg%3D%3D.2"></div>
</div>
<div class="profile--info"><span class="username">ʏɪɴʀᴜɪ ᴅᴇɴɢ</span><span>☺#bobby_dyr</span><br/><span class="userquote">In 2018, ʏɪɴʀᴜɪ ᴅᴇɴɢ received 164❤️, 7✉️ per post by average, and a total of</span></div>
<div class="user-social-wrapper">
<div class="user-info user-posts"><span>104</span><span>Shots</span></div>
<div class="user-info user-followers"><span>16,964</span><span>Likes</span></div>
<div class="user-info user-following"><span>643</span><span>Comments</span></div>
</div>
</div>
I have this piece of code that has the profile card in the middle of screen regardless what the screen size is. It often appears too small for any type of screen. How can I position the profile card to almost fill the screen?
Basically what should I do to adjust it from (too small)to this (ideal)
Just change it:
.shots .shot {
overflow: hidden;
position: relative;
width: 33%; // <-- change it
height: 100px;
flex-grow: 1; // <-- add
}
I would use media queries and target the classes you want to amend on the different screen sizes to make it fit as you need. Some useful links:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
In your case, you would need to amend the width of the card to 100% on mobile to achieve the design on your screenshot. Hope that makes sense! :)
I'm working to create a progress meter which has 4 steps:
25%, 50%, 75%, and 100% completion.
The goal is to pass the component the percentageComplete and then have the component render the progress meter where the width of the bar represents percentage complete and the step bubbles are activated based on if the percentage completion matches the 25, 50, 75 and 100% thresholds.
The above is what I would eventually expect to see if we passed ~80% to the component.. Currently this is what is rendering for 75% which is not desired. It should be:
Here is my current code:
.container {
position: relative;
width: 288px;
padding: 12px 0;
margin: 0 auto;
box-sizing: border-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
}
.container:before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 12px;
background: #E6E6E7;
margin-top: -6px;
border-radius: 50px;
}
.container:after {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 4px;
background: blue;
margin-top: -2px;
width: 75%;
border-radius: 50px;
transition: width .2s ease;
}
.step {
position: relative;
width: 24px;
height: 24px;
box-sizing: border-box;
}
.step:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: #ececec;
}
.p25:after,
.p50:after,
.p75:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 24px;
background: blue;
border-radius: 50%;
}
<div class="container">
<div class="step p25"></div>
<div class="step p50"></div>
<div class="step p75"></div>
<div class="step 100p"></div>
</div>
If you play with the snippet, you'll notice changing the width of
.container:after {
width: ___%;
}
does not render as desired.
Any suggestions on how I can get this ui component to render as desired by simply passing a percentage?
Since you're starting at 25% instead of zero, you need need start at -25% and add to that. You also need to take into account the width of the step.
width: calc(-25% + xx% + (24px * yy));
xx is the percent desired
yy is the step offset
.container {
position: relative;
width: 288px;
padding: 12px 0;
margin: 0 auto;
box-sizing: border-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
}
.container:before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 12px;
background: #E6E6E7;
margin-top: -6px;
border-radius: 50px;
}
.container:after {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 4px;
background: blue;
margin-top: -2px;
width: calc(-25% + 50% + (24px * 1));
border-radius: 50px;
transition: width .2s ease;
box-sizing: border-box;
}
.step {
position: relative;
width: 24px;
height: 24px;
box-sizing: border-box;
}
.step:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: #ececec;
}
.p25:after,
.p50:after,
.p75:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 24px;
background: blue;
border-radius: 50%;
}
<div class="container">
<div class="step p25"></div>
<div class="step p50"></div>
<div class="step p75"></div>
<div class="step 100p"></div>
</div>
You could try this approach, where you can control in JS the width value of track.
.track{
position: absolute;
top: 21px;
height: 4px;
background-color: blue;
}
.container {
position: relative;
width: 288px;
padding: 12px 0;
margin: 0 auto;
box-sizing: border-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
}
.container:before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 12px;
background: #E6E6E7;
margin-top: -6px;
border-radius: 50px;
}
.step {
position: relative;
width: 24px;
height: 24px;
box-sizing: border-box;
}
.step:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: #ececec;
}
.p:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 24px;
background: blue;
border-radius: 50%;
}
<div class="container">
<div class="track" style="width: 80%"></div>
<div class="step p"></div>
<div class="step p"></div>
<div class="step p"></div>
<div class="step p"></div>
</div>
Here is another idea with less of code:
.container {
position: relative;
margin:20px;
width: 288px;
height:50px;
--i:100%;
--p:calc(var(--i) - 56px);
background:
/*The 4 circles*/
radial-gradient(circle at center,#E6E6E7 50%,transparent 53%) 100% 0/ 40px 100%,
radial-gradient(circle at center,blue 50%,transparent 53%) calc(2*100% / 3) 0/ 40px 100%,
radial-gradient(circle at center,blue 50%,transparent 53%) calc(100% / 3) 0/ 40px 100%,
radial-gradient(circle at center,blue 50%,transparent 53%) 0 0/ 40px 100%,
/*The progress bar*/
linear-gradient(blue,blue) 20px 50%/var(--p) 20% no-repeat,
/*The bottom Bar*/
linear-gradient(#E6E6E7,#E6E6E7) center/calc(100% - 20px) 30% no-repeat;
background-repeat:no-repeat;
}
<div class="container">
</div>
<div class="container" style="--i:75%">
</div>
<div class="container" style="--i:50%">
</div>
<div class="container" style="--i:25%">
</div>