What I'm trying to achieve, once I reduce the size of the screen and some elements starts to move to a second line, keep them organized to the left, instead of centered (based on the number of elements on that row). This image might help
And this is my actual code, what I'm doing wrong?
#teamBoxesWrapper {
position: relative;
background-color: ;
width: 1200px;
height: auto;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
#teamUser {
width: 250px;
/* 20% of the viewport width */
height: 250px;
background-color: ;
margin: auto;
cursor: pointer;
margin-bottom: 20px;
position: relative;
}
.teamUser4 {
background-image: url('../images/empleado4.jpg');
background-position: center center;
background-size: cover;
}
<div id="teamBoxesWrapper">
<div id="teamUser" class="teamUser4">
<div id="teamUserPopup4" class="teamUserDetails">
<div id="teamUserTextAligner">
<h3 class="teamUserText1">Manuel Brenes</h3>
<hr class="userHr" />
<h3 class="teamUserText2">Graduado Social y
<br>Derechos Laborales</h3>
</div>
</div>
</div>
</div>
On your code try replacing your justify-content: space-between for center;
Related
Hope you all are doing well!
I'm working on a platform for a digital art exhibition, where we want a curtain to slide aside and reveal the images.
I've used this example code for creating the curtain effect:
https://css-tricks.com/creating-css-sliding-door-effect/
And for the carousel of images, I've used this example code:
https://codepen.io/SitePoint/pen/gRJWqm
Since I'm totally blind, CSS is a little challenging for me because it is a little difficult to test things out myself. :)
I've been told that the pictures show as they should when the curtain slides out to the sides, but the buttons to change pictures is not showing.
I'm not sure why, because both the images and the buttons is included in the "curtain__content" div.
I wonder if anyone maybe could look a little bit at the code and tell me what I need to do to make the buttons show up as they should?
Any help would be greatly appreciated!
Here is my style:
<style>
body {
background-color: aliceblue;
margin: 0;
font-family: "Roboto", sans-serif;
font-size: 16px;
}
h1 {
text-align: center;
margin-bottom: 1.5em;
}
h2 {
text-align: center;
color: #555;
margin-bottom: 0;
}
.carousel {
padding: 20px;
perspective: 500px;
display: flex;
flex-direction: column;
align-items: center;
}
.carousel > * {
flex: 0 0 auto;
}
.carousel figure {
margin: 0;
width: 100%;
transform-style: preserve-3d;
transition: transform 0.5s;
}
.carousel figure img {
width: 100%;
box-sizing: border-box;
padding: 0 0px;
}
.carousel figure img:not(:first-of-type) {
position: absolute;
left: 0;
top: 0;
}
.carousel nav {
display: flex;
justify-content: center;
margin: 20px 0 0;
}
.carousel nav button {
flex: 0 0 auto;
margin: 0 5px;
cursor: pointer;
color: #333;
background: none;
border: 1px solid;
letter-spacing: 1px;
padding: 5px 10px;
}
.curtain {
margin: 0 auto;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
}
.curtain__wrapper {
width: 100%;
height: 100%;
}
.curtain__wrapper input[type=checkbox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 100;
opacity: 0;
top: 0;
left: 0;
}
.curtain__wrapper input[type=checkbox]:checked ~ div.curtain__panel--left {
transform: translateX(0);
}
.curtain__wrapper input[type=checkbox]:checked ~ div.curtain__panel--right {
transform: translateX(0);
}
.curtain__panel {
display: flex;
align-items: center;
background: orange;
color: #fff;
float: left;
position: relative;
width: 50%;
height: 100vh;
transition: all 1s ease-out;
z-index: 2;
}
.curtain__panel--left {
justify-content: flex-end;
transform: translateX(-100%);
}
.curtain__panel--right {
justify-content: flex-start;
transform: translateX(100%);
}
.curtain__content {
align-items: center;
background: #333;
color: #fff;
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
padding: 1rem 0;
position: absolute;
text-align: center;
z-index: 1;
width: 100%;
}
.curtain__content img {
width: 50%;
}
</style>
And here is the HTML in the body tag:
<div class="curtain">
<div class="curtain__wrapper">
<input type="checkbox" checked>
<div class="curtain__panel curtain__panel--left">
<h1>Click to reveal </h1>
</div> <!-- curtain__panel -->
<div class="curtain__content">
<div class="carousel" data-gap="80">
<figure style="transform-origin: 50% 50% -899.521px; transform: rotateY(-4.71239rad);">
<img src="projekt1.png" alt="" style="padding: 80px;">
<img src="projekt2.png" alt="" style="padding: 80px; transform-origin: 50% 50% -899.521px; transform: rotateY(0.785398rad);">
<img src="projekt3.png" alt="" style="padding: 80px; transform-origin: 50% 50% -899.521px; transform: rotateY(1.5708rad);">
<img src="projekt4.png" alt="" style="padding: 80px; transform-origin: 50% 50% -899.521px; transform: rotateY(2.35619rad);">
<img src="projekt5.png" alt="" style="padding: 80px; transform-origin: 50% 50% -899.521px; transform: rotateY(3.14159rad);">
<img src="projekt6.png" alt="" style="padding: 80px; transform-origin: 50% 50% -899.521px; transform: rotateY(3.92699rad);">
<img src="projekt7.png" alt="" style="padding: 80px; transform-origin: 50% 50% -899.521px; transform: rotateY(4.71239rad);">
<img src="projekt8.png" alt="" style="padding: 80px; transform-origin: 50% 50% -899.521px; transform: rotateY(5.49779rad);">
<img src="projekt9.png" alt="" style="padding: 80px; transform-origin: 50% 50% -899.521px; transform: rotateY(5.49779rad);">
<img src="projekt10.png" alt="" style="padding: 80px; transform-origin: 50% 50% -899.521px; transform: rotateY(5.49779rad);">
</figure>
<nav>
<button class="nav prev">Prev</button>
<button class="nav next">Next
</button>
</nav>
</div>
</div>
<div class="curtain__panel curtain__panel--right">
<h1>a special reward...</h1>
</div> <!-- curtain__panel -->
</div> <!-- curtain__wrapper -->
</div> <!-- curtain -->
Thanks in advance!
All the best!
Kind regards,
Niklas
There might be a couple of issues, which I'll talk about in the order of what I think is most likely.
The text is the same color as background
At the moment, the button text and the background are the same color, namely #333. We can see this in the following two CSS declarations:
.curtain__content {
background: #333;
}
.carousel nav button {
color: #333;
}
Because of that, the buttons blend in with the background.
The buttons might be off the screen
While experimenting with cat pictures, if the images were sufficiently large then I found the nav buttons had gone off the bottom of the screen and curtain area. In other words, the pictures pushed the buttons below the viewport.
You have a couple of options depending on the desired design:
Ensure the curtain area is large enough to fit the carousel and buttons (for instance, by not using viewport dimensions)
Ensure the carousel resizes to fit within the screen
Allow the buttons to overlay the carousel
I have the following problem with my hexagons. With the code below it works fine and the hexagon stays within its container.
.hexagon-2 .content {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 30px;
text-align: center;
}
.wrapper {
width: 100%;
/* This is the only value you need to change */
}
.container-2 {
position: relative;
width: 100%;
padding-bottom: 86.6%;
/* This sets the height of the div to 86% of its width */
border: 1px dashed green;
/* Just for demonstration purposes*/
transform: rotate(90deg);
}
.hexagon-2 {
position: absolute;
/* so .hexagon isn't pushed out of .container by the padding */
left: 25%;
width: 50%;
height: 100%;
margin: 0 auto;
/* center .hexagon inside .container*/
background-color: red;
/* color of the hexagon */
}
.hexagon-2:before,
.hexagon-2:after {
display: block;
position: absolute;
/* otherwise :after is below the hexagon */
top: 0;
content: '';
width: 100%;
height: 100%;
background-color: inherit;
}
.hexagon-2:before {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.hexagon-2:after {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="wrapper">
<div class="container-2">
<div class="hexagon-2">
<span class="content">Test test test</span>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="wrapper">
<div class="container-2">
<div class="hexagon-2">
<span class="content">Test test test</span>
</div>
</div>
</div>
</div>
</div>
</div>
As long as I leave the hexagon that way, it works exactly as it should. However, when I rotate the hexagon 90 degrees, it goes wrong.
When I add this line to the .container-2 class:
transform: rotate(90deg);
The hexagons behave like this:
Because of the rotate they no longer fill out the container. Is there a clean way to solve this. I have already tried everything with these hexagons but no luck so far.
Anybody got an idea that I can stil rotate the hexagon but that it stil fills out the container?
Thanks
Just off the top of my head looking at this the reason it's not filling out the container is because the width of the hexagon is different. If you want it to fill exactly the same size when it is rotating make sure point to point is the same width as flat edge to flat edge. I did a quick check and point to point is 310 pixels and flat edge to flat edge is 263 pixels. Hope this helps.
In the middle of the page is where I need the textboxes
horizontal plus vertical center is troublesome.
first center horizontally by making your parent display: flex
and include two bracketting children that stretch flex: 1 as well as your centered element (this allows it to be a perfect third, if you want it to instead be bigger, remove flex: 1 for the center child and put a width in percentage instead (pixel works but will not scale))
then center vertically by adding a margin top where you calculate leftover size :
.centeredchild {
background-color: red;
height: 20px;
flex: 1;
text-align: center;
margin-top: calc(50vh - 10px);
}
.centeringaid {
flex: 1;
}
.parent {
width: 100%;
height: 100vh;
display: flex;
background-color: lightblue;
}
<div class="parent">
<div class="centeringaid"></div>
<div class="centeredchild">hi</div>
<div class="centeringaid"></div>
</div>
there's also the more common method : https://www.w3schools.com/howto/howto_css_center-vertical.asp
this website, by the way is full of usefull tidbits.
Refer below code snippet to align your multiple text boxes in the middle of the page. (Consider page height to be 400px)
.main-div {
height: 400px;
position: relative;
}
.sub-div {
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
input[type="text"] {
margin:10px auto;
border: 1px solid gray;
}
<div class="main-div">
<div class="sub-div">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
You use this code:
CSS:
.outercontainer {
height: 200px;
position: relative;
border: 3px solid green;
}
.innercontainer {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
HTML:
<div class="outercontainer">
<div class="innercontainer">
<p>This sentance is it the middle!</p>
</div>
</div>
I want to center the "view" buttons on my Writings and Projects page, on portrait-oriented mobile devices. However, I can't quite get this to work. Sub-optimally, I've been using translateX as a bandaid solution; however, this doesn't get the job done on multiple screen widths. Here is my current code:
<div class="image-button-wrapper">
<div class="image-button sqs-dynamic-text">
<div class="image-button-inner">
View
</div>
</div>
</div>
#media screen and (max-width: 414px) {
.image-button-wrapper {
max-width: 150px;
transform: translateX(56%);
}}
So far, none of the centering tricks I can think of have proven effective: margin: 0 auto;, text-align: center;, etc. Does anybody have a clue how to fix what should be a simple issue?
Thanks in advance!
Tyler
I think the issue isn't that it's difficult to do, but in that there so many different ways of doing it, depending on the situation, it's hard to know which to reach for.
For example for horizontal unknown width:
use this :
.image-button-wrapper {
width:100%;
height:100vh;
position:relative
}
.image-button-inner {
width: 100%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
position: absolute;
left: 50%;
padding: 20px;
resize: both;
overflow: auto;
max-width: 150px;
text-align: center;
}
<div class="image-button-wrapper">
<div class="image-button sqs-dynamic-text">
<div class="image-button-inner">
View
</div>
</div>
</div>
For Vertical use this :
.image-button-wrapper ,.image-button.sqs-dynamic-text{
width:100%;
height:100vh;
position:relative
}
.image-button-inner {
width: 100%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
top: 50%;
resize: both;
overflow: auto;
max-width: 150px;
text-align: center;
display:table;
vertical-align:center;
}
<div class="image-button-wrapper">
<div class="image-button sqs-dynamic-text">
<div class="image-button-inner">
View
</div>
</div>
</div>
and for both use :
.image-button-wrapper ,.image-button.sqs-dynamic-text{
width:100%;
height:100vh;
position:relative
}
.image-button-inner {
width: 100%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
position: absolute;
left: 50%;
top:50%;
padding: 20px;
resize: both;
overflow: auto;
max-width: 150px;
text-align: center;
}
<div class="image-button-wrapper">
<div class="image-button sqs-dynamic-text">
<div class="image-button-inner">
View
</div>
</div>
</div>
To know more this is why transform:translate(-50%) is used :
I have a design for a top-of-the-page dashboard in HTML that has the following requirements:
Everything should be vertically centered within the dashboard.
It should have a button in the exact center.
It should have text centered at the 25% and 75% marks.
It should have one last group of text all the way to the left.
Like this, but not with horrible colors:
I was able to achieve the top three goals (or very close to it) using display: flex and giving appropriate sizes to everything, like so:
HTML:
<div class="header">
<span class="left-text">LEFT TEXT</span>
<button class="button">BUTTON</button>
<span class="right-text">RIGHT TEXT</span>
</div>
CSS:
.header {
position: absolute;
top: 55px;
height: 40px;
width: 100%;
background-color: beige;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.button {
height: 26px;
width: 100px;
order: 2;
flex-grow: 0;
}
.left-text {
order: 1;
flex-grow: 1;
text-align: center;
}
.right-text {
order: 3;
flex-grow: 1;
text-align: center;
}
This last requirement, though, is really throwing me for a loop; without everything being nice and centered, I feel like flex is going to need some ugly adjustments. I feel like this would be much easier if I could layer div or span elements on top of each other however I liked, but something tells me I can't. Are there any good solutions for this problem? Am I close?
EDIT: added image of mockup.
Hopefully this will work for you, basically it adds the more-left class and positions it relative to the header, and you move it to the left as necessary, whatever is fitting.
HTML
<div class="header">
<span class="more-left">MORE LEFT</span>
<span class="left-text">LEFT TEXT</span>
<button class="button">BUTTON</button>
<span class="right-text">RIGHT TEXT</span>
</div>
CSS
.header {
position: absolute;
top: 55px;
height: 40px;
width: 100%;
background-color: beige;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.button {
height: 26px;
width: 100px;
order: 2;
flex-grow: 0;
}
.left-text {
order: 1;
flex-grow: 1;
text-align: center;
}
.right-text {
order: 3;
flex-grow: 1;
text-align: center;
}
.more-left {
position: relative;
left: 15%; /* adjust as neccessary */
}
I ended up ditching Flexbox entirely, going with absolute positioning and translate in order to get the results I wanted. Here's the final code:
HTML
<div class="header">
<span class="more-left v-center">MORE LEFT</span>
<span class="left-text abs-center">LEFT TEXT</span>
<button class="button abs-center">BUTTON</button>
<span class="right-text abs-center">RIGHT TEXT</span>
</div>
CSS
.header {
position: absolute;
top: 55px;
height: 40px;
width: 100%;
background-color: beige;
}
.v-center {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.h-center {
position: absolute;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.abs-center {
position: absolute;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.button {
height: 26px;
width: 100px;
left: 50%;
}
.more-text {
left: 10px;
}
.left-text {
left: 25%;
}
.right-text {
left: 75%;
}
EDIT: it occurred to me that you can't really combine v-center and h-center, because one of the transform entries will completely overwrite the other, instead of combining them. Hence the abs-center class.