This question already has answers here:
Why are flex items not wrapping?
(2 answers)
Closed 6 years ago.
The problem is that i want three divs in a row instead of six, i set the width of whole section to 80% and the width of each section to 26,66667% which is 80/3 but my display: flex is not working properly
Here is my code:
body,
html {
background: #FFFFFF;
margin: 0;
padding: 0;
height: 100%;
}
* {
box-sizing: border-box;
}
#section_wrapper {
width: 80%;
margin: 0 auto;
position: relative;
font-size: 0;
display: flex;
}
.section {
margin: 0;
padding: 0;
position: relative;
width: 26.666667%;
height: 200px;
font-size: 20px;
}
.section1 {
background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
background-position: center;
}
.section2 {
background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
background-position: center;
}
.section3 {
background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
background-position: center;
}
.section4 {
background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
background-position: center;
}
.section5 {
background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
background-position: center;
}
.section6 {
background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
background-position: center;
}
.section1 h3 {
font-family: "Roboto";
color: white;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
position: absolute;
transform: translate(-50%, -50%);
}
.section3 h3 {
font-family: "Roboto";
color: white;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
position: absolute;
transform: translate(-50%, -50%);
}
.section5 h3 {
font-family: "Roboto";
color: white;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
position: absolute;
transform: translate(-50%, -50%);
}
<div id="section_wrapper">
<div class="section section1">
<h3>About me</h3>
</div>
<div class="section section3">
</div>
<div class="section section3">
<h3>Work</h3>
</div>
<div class="section section4">
</div>
<div class="section section5">
<h3>Services</h3>
</div>
<div class="section section6">
</div>
</div>
By the way this is the design i'm trying to code:
You are missing flex-wrap:wrap using it will wrap when there is not more space for the children to expand
And you can use flex-basis: calc(100%/3) instead of that weird width
See a good article about flexbox here
body,
html {
background: #FFFFFF;
margin: 0;
padding: 0;
height: 100%;
}
* {
box-sizing: border-box;
}
#section_wrapper {
width: 80%;
margin: 0 auto;
position: relative;
font-size: 0;
display: flex;
flex-wrap: wrap
}
.section {
margin: 0;
padding: 0;
position: relative;
flex: 1 calc(100%/3);
height: 200px;
font-size: 20px;
}
.section1 {
background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
background-position: center;
}
.section2 {
background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
background-position: center;
}
.section3 {
background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
background-position: center;
}
.section4 {
background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
background-position: center;
}
.section5 {
background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
background-position: center;
}
.section6 {
background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
background-position: center;
}
.section1 h3 {
font-family: "Roboto";
color: white;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
position: absolute;
transform: translate(-50%, -50%);
}
.section3 h3 {
font-family: "Roboto";
color: white;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
position: absolute;
transform: translate(-50%, -50%);
}
.section5 h3 {
font-family: "Roboto";
color: white;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
position: absolute;
transform: translate(-50%, -50%);
}
<div id="section_wrapper">
<div class="section section1">
<h3>About me</h3>
</div>
<div class="section section3">
</div>
<div class="section section3">
<h3>Work</h3>
</div>
<div class="section section4">
</div>
<div class="section section5">
<h3>Services</h3>
</div>
<div class="section section6">
</div>
</div>
Related
I am trying to create an overlay for the website, it should have the form of three boxes stacked on top of each other. Currently, they are situated so that the first two are on the first row, and the third one is on the bottom. To make them all be on a separate row, I am trying to add single parameter to css: width: 100%, which worked for the third row, but ruins everything if I do it to either of the ones left.
Here is the code snippet, It will work on its own:
* {
box-sizing: border-box;
}
#box {
width: 70vw;
height: 80vh;
margin: 10px;
padding: 10px;
border-radius: 25px;
}
.column4 {
height: 39vh;
width: 50%;
float: left;
padding: 50px;
text-align: center;
color: black;
font-size: 20px;
line-height: 1.3;
/*width: 100%;*/ /* here is the culprit*/
}
.column5 {
height: 39vh;
width: 100%;
float: left;
padding: 10px;
text-align: center;
color: black;
font-size: 20px;
line-height: 1.3;
}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 2;
cursor: pointer;
}
#text {
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#boxt3 {
font-size: 25px;
}
#boxt1 {
font-size: 20px;
}
#boxt2 {
font-size: 20px;
}
<div id="overlay" style="z-index: 100; display: block;" onclick="off()">
<div id="text">
<div id="box" style="background:#fff">
<div class="row">
<div id="boxt1" class="column4" style="padding-top: 0; overflow: auto">Facebook, Inc.<br>NASDAQ<br>US<br>Internet Content & Information<br>Communication Services<br>some nice info</div>
<div id="boxt2" class="column4" style="padding-top: 0; overflow: auto">Price: 341.00 <br>mCap: 965.39B<br>Beta: 1.295305<br>volAvg: 14142012<br>P/E: NA</div>
<div class="column5" style="padding-top: 5; overflow: auto">
<h2 id="boxt3" stle="">Key features:<br> Net income: 6969% year-to-year<br> Undervalued on Very% by P/S<br>We love your data -Mark<br><br> Estimated probability of success: 0<br></h2>
</div>
</div>
</div>
</div>
</div>
I understand that there is probably some dumb mistake, but I can't find it at all (I have just started learning :) ). What is the issue here?
The issue occurs because you have set the height for the child element which is too high (39vh + 39vh + 39vh) for the parent element (80vh) . Try fitting the height of the child elements into parent's height. It will fix your problem.
* {
box-sizing: border-box;
}
#box {
width: 70vw;
height: 80vh;
/*margin: 10px;
padding: 10px;*/
border-radius: 25px;
}
.column4 {
height: 20vh;
width: 50%;
float: left;
padding: 50px 50px 10px;
text-align: center;
color: black;
font-size: 20px;
line-height: 1.3;
width: 100%;
}
*{box-sizing:border-box;}
.column5 {
height: 40vh;
width: 100%;
float: left;
padding: 10px;
text-align: center;
color: black;
font-size: 20px;
line-height: 1.3;
}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 2;
cursor: pointer;
}
#text {
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#boxt3 {
font-size: 25px;
}
#boxt1 {
font-size: 20px;
}
#boxt2 {
font-size: 20px;
}
<div id="overlay" style="z-index: 100; display: block;" onclick="off()">
<div id="text">
<div id="box" style="background:#fff">
<div class="row">
<div id="boxt1" class="column4" style="padding-top: 0; overflow: auto">Facebook, Inc.<br>NASDAQ<br>US<br>Internet Content & Information<br>Communication Services<br>some nice info</div>
<div id="boxt2" class="column4" style="padding-top: 0; overflow: auto">Price: 341.00 <br>mCap: 965.39B<br>Beta: 1.295305<br>volAvg: 14142012<br>P/E: NA</div>
<div class="column5" style="padding-top: 5; overflow: auto">
<h2 id="boxt3" stle="">Key features:<br> Net income: 6969% year-to-year<br> Undervalued on Very% by P/S<br>We love your data -Mark<br><br> Estimated probability of success: 0<br></h2>
</div>
</div>
</div>
</div>
</div>
Now I have set the child element's height to 20vh + 20vh + 40vh sums up to the height of the parent's height 80vh
You must remove width: 100% from column5 class
* {
box-sizing: border-box;
}
#box {
width: 70vw;
height: 80vh;
margin: 10px;
padding: 10px;
border-radius: 25px;
}
.column4 {
height: 39vh;
width: 50%;
float: left;
padding: 50px;
text-align: center;
color: black;
font-size: 20px;
line-height: 1.3;
/*width: 100%;*/ /* here is the culprit*/
}
.column5 {
height: 39vh;
float: left;
padding: 10px;
text-align: center;
color: black;
font-size: 20px;
line-height: 1.3;
}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 2;
cursor: pointer;
}
#text {
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#boxt3 {
width : 50px;
font-size: 25px;
}
#boxt1 {
width : 30px;
font-size: 20px;
}
#boxt2 {
width : 50px;
font-size: 20px;
}
<div id="overlay" style="z-index: 100; display: block;" onclick="off()">
<div id="text">
<div id="box" style="background:#fff">
<div class="row">
<div id="boxt1" class="column4" style="padding-top: 0; overflow: auto">Facebook, Inc.<br>NASDAQ<br>US<br>Internet Content & Information<br>Communication Services<br>some nice info</div>
<div id="boxt2" class="column4" style="padding-top: 0; overflow: auto">Price: 341.00 <br>mCap: 965.39B<br>Beta: 1.295305<br>volAvg: 14142012<br>P/E: NA</div>
<div class="column5" style="padding-top: 5; overflow: auto">
<h2 id="boxt3" stle="">Key features:<br> Net income: 6969% year-to-year<br> Undervalued on Very% by P/S<br>We love your data -Mark<br><br> Estimated probability of success: 0<br></h2>
</div>
</div>
</div>
</div>
</div>
I am trying to center 4 div boxes in a straight vertical line using translate method you use when centering objects in the middle of the screen, this is the code I used:
.body-component {
position: relative;
margin: 10px;
color: #000;
display: inline-block;
vertical-align: top;
background-color: #ff6d00;
overflow: auto;
border: 1px solid #D0D3D4;
}
.width-medium {
width: 500px;
}
.height-medium {
height: 400px;
}
.code-snippet {
position: relative;
width: 95%;
height: 95%;
background-color: #000;
}
.snippet-title {
position: absolute;
color: #248b98;
font-family: "Open Sans", sans-serif;
padding: 15px;
text-decoration: underline;
z-index: 1;
}
.center {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0px;
}
.boxes {
position: relative;
width: 100%;
height: 100%;
}
.box1 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 20%;
left: 50%;
transform: translate(-20%, -50%);
}
.box2 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 40%;
left: 50%;
transform: translate(-40%, -50%);
}
.box3 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 60%;
left: 50%;
transform: translate(-60%, -50%);
}
.box4 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 80%;
left: 50%;
transform: translate(-80%, -50%);
}
<div class="body-component width-medium height-medium">
<span class="snippet-title">Box loading animation</span>
<div class="code-snippet center">
<div class="boxes">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</div>
</div>
I tried multiple methods to fix this, but I would not like to centre them using pixels because I am using this on a responsive website.
If absolute positioning, you can use left: 50% with a negative translateX of 50%.
.body-component {
position: relative;
margin: 10px;
color: #000;
display: inline-block;
vertical-align: top;
background-color: #ff6d00;
overflow: auto;
border: 1px solid #D0D3D4;
}
.width-medium {
width: 500px;
}
.height-medium {
height: 400px;
}
.code-snippet {
position: relative;
width: 95%;
height: 95%;
background-color: #000;
}
.snippet-title {
position: absolute;
color: #248b98;
font-family: "Open Sans", sans-serif;
padding: 15px;
text-decoration: underline;
z-index: 1;
}
.center {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0px;
}
.boxes {
position: relative;
width: 100%;
height: 100%;
}
.box {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
left: 50%;
transform: translateX(-50%)
}
.box1 {
top: 20%;
}
.box2 {
top: 40%;
}
.box3 {
top: 60%;
}
.box4 {
top: 80%;
}
<div class="body-component width-medium height-medium">
<span class="snippet-title">Box loading animation</span>
<div class="code-snippet center">
<div class="boxes">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</div>
</div>
</div>
That said, you could use flexbox to achieve this layout without having to know the number of the boxes in advance for the purpose of vertical spacing.
html,
body {
margin: 0;
padding: 0;
color: #248b98;
font-family: "Open Sans", sans-serif;
}
.body-component {
background-color: black;
height: 100vh;
border: 10px solid #ff6d00;
box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: space-betwen;
align-items: center;
min-height: 500px;
}
.snippet-title {
flex: 0 1 auto;
text-decoration: underline;
padding: 10px;
}
.code-snippet {
flex: 1 1 auto;
display: flex;
}
.boxes {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 15px;
}
.box {
width: 30px;
height: 30px;
background-color: #056ab3;
}
<div class="body-component">
<span class="snippet-title">Box loading animation</span>
<div class="code-snippet">
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
Try this... add transform: translate(-50%, -50%); to box classes
.body-component {
position: relative;
margin: 10px;
color: #000;
display: inline-block;
vertical-align: top;
background-color: #ff6d00;
overflow: auto;
border: 1px solid #D0D3D4;
}
.width-medium {
width: 500px;
}
.height-medium {
height: 400px;
}
.code-snippet {
position: relative;
width: 95%;
height: 95%;
background-color: #000;
}
.snippet-title {
position: absolute;
color: #248b98;
font-family: "Open Sans", sans-serif;
padding: 15px;
text-decoration: underline;
z-index: 1;
}
.center {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0px;
}
.boxes {
position: relative;
width: 100%;
height: 100%;
}
.box1 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
}
.box2 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.box3 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
.box4 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="body-component width-medium height-medium">
<span class="snippet-title">Box loading animation</span>
<div class="code-snippet center">
<div class="boxes">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</div>
</div>
I am running into an issue where my contact-section-left is not centering in the parent div. This is not a vertical-align: top issue. You can see the border-right white line, that is showing how much the height extends for the contact-section-left div is, but I am it to be the same size as the right side with the image (sorry the example doesn't have the image).
I am not sure if I am going for the wrong approach here or what, but I am wanting it to look like the paint image I made below.
Any ideas?
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#contact-section {
width: 100%;
background: #00a16d;
}
#contact-section-wrap {
padding: 2%;
}
#contact-section-left, #contact-section-right {
height: 100%;
display: inline-block;
color: #FFF;
font-size: 1.5em;
padding: 1% 0;
position: relative;
}
#contact-section-left {
width: 60%;
border-right: 1px solid #FFF;
font-style: italic;
}
#contact-section-right {
width: 30%;
text-align: center;
}
#contact-img {
background-image: url("../icons/envelope.png");
background-repeat: no-repeat;
background-size: auto;
margin: 0 auto;
display: block;
width: 128px;
height: 128px;
position: relative;
}
#contact-width {
width: 200%;
font-size: 2em;
}
.total-width {
width: 100%;
}
<div id="contact-section">
<div id="contact-section-wrap">
<div id="contact-section-left">
<div class="total-center total-width">Tell us more about your project.</div>
</div><div id="contact-section-right">
<div id="contact-img"><span class="total-center" id="contact-width">Contact us</span></div>
</div>
</div>
</div>
Your entire code can be simplified as follows. I use a pseudo element for the vertical line in between, and shift the position with order via flexbox.
jsFiddle
#contact-section {
display: flex;
justify-content: space-around;
align-items: center;
color: #FFF;
background: #00a16d;
padding: 1em 2em;
}
#contact-section:before {
content: "";
flex: 0 0 1px;
height: 2em;
background: #fff;
order: 2;
}
#contact-section-left {
font-size: 1.5em;
order: 1;
font-style: italic;
}
#contact-section-right {
background: url("https://i.imgur.com/cLMHUZE.png") center / contain no-repeat;
font-size: 2em;
order: 3;
padding: .5em 0;
}
<div id="contact-section">
<div id="contact-section-left">Tell us more about your project.</div>
<div id="contact-section-right">Contact us</div>
</div>
Assiging display: flex; align-items: center; to the parent of the left/right sections will display them side-by-side and center them vertically. Then if you move the border-right from the left (shorter) element to a border-right of the right (taller) element, the line should look more like you want it.
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#contact-section {
width: 100%;
background: #00a16d;
}
#contact-section-wrap {
padding: 2%;
display: flex;
align-items: center;
}
#contact-section-left, #contact-section-right {
height: 100%;
display: inline-block;
color: #FFF;
font-size: 1.5em;
padding: 1% 0;
position: relative;
}
#contact-section-left {
width: 60%;
font-style: italic;
}
#contact-section-right {
width: 30%;
text-align: center;
border-left: 1px solid #FFF;
}
#contact-img {
background-image: url("../icons/envelope.png");
background-repeat: no-repeat;
background-size: auto;
margin: 0 auto;
display: block;
width: 128px;
height: 128px;
position: relative;
}
#contact-width {
width: 200%;
font-size: 2em;
}
.total-width {
width: 100%;
}
<div id="contact-section">
<div id="contact-section-wrap">
<div id="contact-section-left">
<div class="total-center total-width">Tell us more about your project.</div>
</div><div id="contact-section-right">
<div id="contact-img"><span class="total-center" id="contact-width">Contact us</span></div>
</div>
</div>
</div>
Your #contact-section-wrap doesn't have a height. The height: 100%s you are setting aren't really doing anything. They still rely on a parent height to have any idea what they're getting 100% of.
Try setting a height on #contact-section-wrap.
we have the following div structure, where we would like to horizontally center both the image and the text within the container div. However, the image is left aligned and only the title is centered.You could find the code below:
.QHeader {
position: absolute;
margin-top: 96px;
margin-left: 0px;
width: 800px;
height: 415px;
background-image: url('../img/bg_blue_rect.png');
background-repeat: no-repeat;
background-position: left top;
}
#QHeaderImg01 {
position: absolute;
display: block;
margin: 0 auto;
margin-top: 72px;
width: 263px;
height: 221px;
background-color: #0F0;
}
.QHeaderTitle {
position: absolute;
margin-top: 324px;
margin-left: 0;
width: 800px;
height: auto;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
font-weight: bold;
color: #000;
}
<div class="QHeader">
<img id="QHeaderImg01" src="img/q_header_img_01.png" />
<div class="QHeaderTitle">
TITLE
</div>
<!--QHeaderTitle-->
</div>
<!--QHeader-->
Just remove your position: absolute; or change it to position: relative;, as you will not need absolute positioning to horizontally center your elements:
.QHeader {
width: 800px;
height: 415px;
background-image: url(http://placehold.it/800x415);
background-repeat: no-repeat;
background-position: left top;
}
#QHeaderImg01 {
display: block;
margin: 0 auto;
width: 263px;
height: 221px;
background-color: #0F0;
}
.QHeaderTitle {
margin-top: 50px;
width: 800px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
font-weight: bold;
color: #000;
}
<div class="QHeader">
<img id="QHeaderImg01" src="http://placehold.it/263x221/0c0" />
<div class="QHeaderTitle">
TITLE
</div>
<!--QHeaderTitle-->
</div>
<!--QHeader-->
just change
#QHeaderImg01 {
position:absolute;
}
to
#QHeaderImg01 {
position:relative;
}
and of cource, remove the big margin-top
div.container {
height: 10em;
position: relative }
div.container p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto;
}
<body>
<div class=container>
<IMG class="displayed" src="http://labs.qnimate.com/slider/1.jpg" alt="...">
<p>Centered!
</div>
or
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto;
}
div.container {
height: 10em;
position: relative }
div.container p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
<IMG class="displayed" src="http://labs.qnimate.com/slider/1.jpg" alt="...">
<div class=container>
<p>Centered!
</div>
I'm trying to center content over a fullscreen slick slider (kenwheeler.github.io/slick/),
I've attempted to use a flex box but the content remains at the edge of the viewport, which appears to be an issue with the position tag of the slick css but I can't figure out what I'm doing wrong.
It's my first time working with flex so maybe I'm missing something?
Website live here
HTML
<div class="wrapper">
<div class="main">
<img class="logo" src="img/logo.png">
<h1>XXXXXX</h1>
<h2>XXXX is a collaboration between XXXX & XXXX</h2>
</div>
<div class="background">
<div class="slide" style="background: url('bg/hlg1.jpg') no-repeat center center"></div>
<div class="slide" style="background: url('bg/hlg2.jpg') no-repeat center center"></div>
<div class="slide" style="background: url('bg/hlg3.jpg') no-repeat center center"></div>
<div class="slide" style="background: url('bg/hlg4.jpg') no-repeat center center"></div>
</div>
CSS
*{
min-height: 0;
min-width: 0;
cursor: crosshair;
}
html{
height: 100%;
min-height: 100%;
}
body{
font-family: sans-serif, "Helvetica", "Arial";
font-weight: bold;
font-size: 62.5%;
color: #fff;
text-align: center;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
background: #000;
min-height: 100%;
overflow: hidden;
}
.wrapper {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.slide {
height: 100%;
width: 100%;
background-size: cover !important;
}
.background {
height: 100%;
width: 100%;
z-index: 0;
}
.slick-list,
.slick-track {
height: 100%;
}
.slick-prev {
position: fixed;
left: 2vw;
height: 4vh;
width: 3vw;
z-index: 2;
}
.slick-next {
position: fixed;
right: 2vw;
height: 4vh;
width: 3vw;
z-index: 2;
}
.slick-slider {
margin-bottom: 0;
}
.arrow:hover {
cursor: crosshair;
}
.main {
flex: none;
top: 3vh;
z-index: 1;
max-width: 50%;
position: absolute;
}
.logo {
width: 25vw;
margin: auto;
}
Since that element (main) stays there all the time, you can use these settings:
.main {
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 1;
}