I've tried several ways to code that supports IE - no success. See screenshot below to see the issues I'm showing.
position: relative; and position: absolute; in the parent in css didnt work.
First several lines shows -
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=11">
HTML
<div class="notice-wrapper">
<div class="notice-overlay">
<div class="notices">
<div class="box-left">
<img src="imgs/check.png" alt="Everything is Good! - Sorenson VRS">
<p class="good">EVERYTHING IS GOOD!</p>
</div>
<div class="box-right"><h1>Service Outage</h1><p>Sorenson is not experiencing any service outage at this time. If you are experience problems connecting to VRS, please restart the Sorenson endpoint (VP, PC, or Mobile device). if you continue to have problems, please contact Tech Support below.</p></div>
</div>
</div>
</div>
<div class="service-wrapper">
<div class="services">
<div class="button"><img src="imgs/icon-techsup.png" class="iconBtn"> TECHNICAL SUPPORT</div>
<div class="text"><p>For technical issues with placing or receiving videophone calls.</p></div>
</div>
<div class="services">
<div class="button"><img src="imgs/icon-custserv.png" class="iconBtn"> CUSTOMER SERVICES</div>
<div class="text2"><p>For questions about applying for ntouch®, porting, moving, updating your address, or other general questions.</p></div>
</div>
</div>
<div class="video-wrapper">
<div class="title-video"><h2>(title here)</h2></div>
<div class="video"><img src="imgs/video-placeholder.png" alt="video"></div>
<div class="bg-orange"></div>
<div class="bg-white-watermark"></div>
<div class="bg-white"></div>
</div>
CSS with the Everything is Good boxes -
.notice-wrapper {
height: 400px;
width: 100%;
}
.notice-overlay {
display: block;
width: 100%;
height: 400px;
position: relative;
background: rgba(0,0,0,0.8);
left: 0;
z-index: 9999;
color: #fff;
overflow: hidden;
text-align: center;
}
.notices {
display: flex;
width: 809.25px;
height: 288.25px;
text-align: center;
vertical-align: middle;
overflow: hidden;
margin: 0 auto;
position: relative;
transform: translateY(60px)
-ms-transform: translateY(60px);
-webkit-transform: translateY(60px);
}
.box-left {
flex: 1;
background: #41ad49;
height: 100%;
padding-top: 35px;
}
.box-right {
width: 450px;
background: #40403f;
padding: 25px;
text-align: left;
}
CSS for the two buttons and the texts -
.service-wrapper {
width: 100%;
height: 175px;
background-color: #000000;
}
.services {
width: 55%;
display: flex;
margin: 0 auto;
transform: translateY(15px)
-ms-transform: translateY(25px);
-webkit-transform: translateY(15px);
}
.text p {
flex: 1 1 auto;
line-height: 25px;
font-size: 16px;
color: #ffffff;
text-align: left;
align-items: center;
transform: translateY(6px)
-ms-transform: translateY(6px);
-webkit-transform: translateY(6px);
}
.text2 p {
flex: 1 1 auto;
line-height: 25px;
font-size: 16px;
color: #ffffff;
text-align: left;
align-items: center;
transform: translateY(6px)
-ms-transform: translateY(6px);
-webkit-transform: translateY(6px);
}
.button {
flex: 0 0 auto;
height: 40px;
width: 225px;
margin: 10px;
padding: 5px;
padding-right: 15px;
padding-left: 15px;
border-radius: 5px;
background: #ffbb11;
text-align: center;
color: #000000;
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-around;
}
.iconBtn{
max-height: 75%;
max-width: 75%;
}
CSS on title and the image -
.title-video h2 {
width: 100%;
position: absolute;
margin: auto 0;
text-align: center;
margin-top: 50px;
transform: translateX(-285px)
-ms-transform: translateX(-285px);
-webkit-transform: translateX(-285px);
}
.video-wrapper {
width: 100%;
margin: auto 0;
text-align: center;
}
.video {
position: absolute;
margin: auto 0;
text-align: center;
width: 100%;
}
.video img {
max-height: 75%;
max-width: 75%;
width: 700px;
height: 393px;
margin-top: 90px;
}
Related
when the screen gets smaller on my website, the elements go to irrelevant places. I did some research and thought I could remove it using '%' but it didn't work.
This is 1 scale:
This is 0.25 scale
/*my container*/
.container-home{
width: 100%;
height: 60rem;
display: flex;
align-items: center;
}
/*
the articles are here*/
.words {
display: flex;
flex-direction: column;
justify-content: center;
width: 60%;
height: 100vh;
margin-left: 25vh;
transition: 1.5s;
}
.header{
font-size: 5rem;
font-weight: 500;
}
.description {
display: block;
margin-top: 3rem;
font-size: 2rem;
}
/*explore text span*/
.explore{
margin-top: 2.5rem;
width: 15rem;
height: 4rem;
text-align: center;
display: block;
font-size: 2rem;
border: 0.1rem solid #000;
border-radius: 2.5rem;
margin-left: 1.5rem;
position: relative;
z-index: 1;
}
/*explore text a*/
.explore a{
display: block;
text-decoration: none;
font-size: 2rem;
color: #000;
text-align: center;
margin-top: 0.7rem;
}
.explore:hover {
border-color: transparent;
text-align: center;
transition: 1s;
transform: translateY(0.6rem) translateX(-1rem);
}
/*colored rectangle under text explore*/
.explore-hover{
display: inline;
position: absolute;
width: 15rem;
height: 4rem;
border-radius: 2.5rem;
background-color: #f1e0d4;
top: 42rem;
}
/*circle , solid circle and image in this*/
.image-design{
width: 100%;
height:100vh;
}
.circle{
position: relative;
width: 100%;
height: 100%;
clip-path: circle(300px at center);
background-color: #d7e7f1;
margin-top:8rem;
}
.solid-circle{
position: absolute;
width: 60rem;
height: 60rem;
border-radius: 50%;
background-color: transparent;
top: 30%;
left: 28%;
border: 1px solid #3398d7;
}
/*I created it to put an image on top of the circles*/
.conainer-image-design{
position: absolute;
width: 100%;
left: 25rem;
height:100vh;
}
.image{
position: relative;
top: 25%;
left: 12%;
}
<div class="container-home">
<div class="words">
<span class="header">
Handcrafted<br>
& ethically sourced
</span>
<span class="description">A collection inspired by old-world charm, crafted
<br>with moisannites and diamonds.
</span>
<span class="explore">Explore→</span>
<div class="explore-hover"></div>
</div>
<div class="image-design">
<div class="conainer-image-design">
<div class="circle"></div>
<div class="solid-circle"></div>
</div>
<span class="image"><img src="./ring.png"></span>
</div>
</div>
what do you recommend to give the measurements, I mainly use rem or % .which is better to keep the image intact?
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 have searched all over stack overflow but I am unable to find any clue and I am struck here. I used flex container and child items in my code to some extent but I couldn't move beyond that. Thing is when we hover a child item, a new child item need to be created as shown in the expected result. Should we need to use pseudo element or any other flex properties to achieve this. Thanks much in advance.
My code:
https://jsfiddle.net/k2qr398u/1/
My result
https://imgur.com/kRHNHuu
Expected result:
https://imgur.com/2B6CkYF
/**CSS**/
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
background-color: #400017;
}
.img-css {
width: 50px;
height: 50px;
}
.main-heading {
display: block;
text-align: center;
color: #fc065d;
margin-bottom: 70px;
}
.img-js {
width: 50px;
height: 50px;
}
.container {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
border: 3px solid #360310;
max-width: 610px;
height: 310px;
text-align: center;
margin: 0 auto;
flex-direction: row;
/* transform: translate(-50%,-50%); */
}
.col {
width: 130px;
height: 100px;
margin: 0 auto;
border: 3px solid #5e0a1f;
padding-top: 44px;
padding-left: 26px;
padding-right: 26px;
color: #fff;
background-color: #010001;
border-radius: 30px;
z-index: 20;
/* position: relative; */
}
.col p {
font-size: 16px;
font-weight: bold;
}
.col-2 p {
position: relative;
top: 55px;
text-align: center;
font-weight: bold;
}
<!--**HTML**-->
<body>
<div class="container">
<div class="col col-1">
<img src="images/css.svg" alt="CSS logo" class="img-css">
<br>
<p>I am</p>
</div>
<div class="col col-2">
<p class="my-name">Sri</p>
</div>
<div class="col col-3">
<img src="images/javascript.svg" alt="JS logo" class="img-js">
<p>Developer
</p>
</div>
</div>
</body>
P.S: Sorry if this question sounds very silly or dumb, I am a beginner trying to learn web dev skillsets.
I have created something similar to your expected result. Please run the code snippet for the result.
UPDATE: To include the hover off transition.
/**CSS**/
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
background-color: #400017;
}
.img-css {
width: 50px;
height: 50px;
}
.main-heading {
display: block;
text-align: center;
color: #fc065d;
margin-bottom: 70px;
}
.img-js {
width: 50px;
height: 50px;
}
.container {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
border: 3px solid #360310;
max-width: 610px;
height: 310px;
text-align: center;
margin: 0 auto;
flex-direction: row;
/* transform: translate(-50%,-50%); */
}
.col {
width: 130px;
height: 100px;
margin: 0 auto;
border: 3px solid #5e0a1f;
padding-top: 44px;
padding-left: 26px;
padding-right: 26px;
color: #fff;
background-color: #010001;
border-radius: 30px;
z-index: 20;
position: relative;
}
.col p {
font-size: 16px;
font-weight: bold;
}
/*
.col-2 p {
position: relative;
top: 55px;
text-align: center;
font-weight: bold;
}
*/
.col-1,
.col-2-1,
.col-2-2,
.col-3 {
position: absolute;
left: 0;
top: 0;
transition: 1s;
}
.wrapper {
position: relative;
}
.wrapper:hover .col-1 {
transition: 1s;
left: -200px;
}
.wrapper:hover .col-2-1 {
transition: 1s;
top: -170px;
}
.wrapper:hover .col-2-2 {
transition: 1s;
top: 170px;
}
.wrapper:hover .col-3 {
transition: 1s;
left: 200px;
}
<!--**HTML**-->
<body>
<div class="container">
<div class="wrapper">
<div class="col"> Underneath</div>
<div class="col col-1">
<img src="images/css.svg" alt="CSS logo" class="img-css">
<br>
<p>I am</p>
</div>
</div>
<div class="wrapper">
<div class="col"> Underneath</div>
<div class="col col-2-1">
<p class="my-name">Sri</p>
</div>
<div class="col col-2-2">
<p class="my-name">Pratham</p>
</div>
</div>
<div class="wrapper">
<div class="col"> Underneath</div>
<div class="col col-3">
<img src="images/javascript.svg" alt="JS logo" class="img-js">
<p>Developer
</p>
</div>
</div>
</div>
</body>
The idea is:
Overlay some content over main content.
On hover reveal it :)
.card {
width: 150px;
height: 80px;
border: 1px solid #999;
background: #ccc;
border-radius: 8px;
position: relative;
margin: 20% auto;
}
.card:hover > .o-top {
top: -80px;
background: #f00;
}
.card:hover > .o-bottom {
bottom: -80px;
}
.o-top {
top: 0;
transition: top 1.5s, background 2s;
}
.o-bottom {
bottom: 0;
transition: bottom 1.5s, background 2s;
}
.card-overlay {
position: absolute;
height: 100%;
width: 100%;
background: #333;
pointer-events: none;
color: #fff;
}
<div class="card">
<div class="card-overlay o-top">TOP OVERLAY</div>
<div class="card-overlay o-bottom">BOTTOM OVERLAY</div>
<H3>INTERNAL CONTENT</H3>
</div>
So I'm learning CSS and I'm still getting used to being able to correctly position all the elements. Right now, I have an HTML and CSS file that draws what basically looks like the Android robot. There's an action for the head that if you hover over it, it changes its width to 300px. The problem is that the eyes become uncentered. How can I center the eyes during the hover event?
EDIT: Bonus question; in the .eyes portion of the CSS file, I was wondering why just doing display: flex centers the eyes. I thought I would have to add align_items: center to center it across the cross axis, but just doing that first bit already centers it.
h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
.robots {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.head,
.left_arm,
.torso,
.right_arm,
.left_leg,
.right_leg {
background-color: #5f93e8;
}
.head {
width: 200px;
margin: 0 auto;
height: 150px;
border-radius: 200px 200px 0 0;
margin-bottom: 10px;
}
.eyes {
display: flex;
align-items: center;
}
.head:hover {
width: 300px;
}
.upper_body {
width: 300px;
height: 150px;
display: flex;
}
.left_arm,
.right_arm {
width: 40px;
height: 125px;
border-radius: 100px;
}
.left_arm {
margin-right: 10px;
}
.right_arm {
margin-left: 10px;
}
.torso {
width: 200px;
height: 200px;
border-radius: 0 0 50px 50px;
}
.lower_body {
width: 200px;
height: 200px;
/* This is another useful property. Hmm what do you think it does?*/
margin: 0 auto;
display: flex;
justify-content: center;
}
.left_leg,
.right_leg {
width: 40px;
height: 120px;
border-radius: 0 0 100px 100px;
}
.left_leg {
margin-right: 30px;
}
.left_leg:hover {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
.right_leg {
margin-left: 30px;
}
.right_leg:hover {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(340deg);
}
.left_eye,
.right_eye {
width: 20px;
height: 20px;
border-radius: 15px;
background-color: white;
}
.left_eye {
/* These properties are new and you haven't encountered
in this course. Check out CSS Tricks to see what it does! */
position: relative;
top: 100px;
left: 40px;
}
.right_eye {
position: relative;
top: 100px;
left: 120px;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<h1>Robot Friend</h1>
<div class="robots">
<div class="android">
<div class="head">
<div class="eyes">
<div class="left_eye"></div>
<div class="right_eye"></div>
</div>
</div>
<div class="upper_body">
<div class="left_arm"></div>
<div class="torso"></div>
<div class="right_arm"></div>
</div>
<div class="lower_body">
<div class="left_leg"></div>
<div class="right_leg"></div>
</div>
</div>
</div>
Simply try to position your eyes with margin- not with position- left:
.left_eye, .right_eye {
width: 20px;
height: 20px;
border-radius: 15px;
background-color: white;
margin: 0 auto; <-- make horizontal margin automatically
}
So it will still be centered even if you change element's width.
You can simply add this CSS code. (adjust the width as you need)
.eyes{
width:200px;
margin:0 auto;
}
h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
.robots {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.head,
.left_arm,
.torso,
.right_arm,
.left_leg,
.right_leg {
background-color: #5f93e8;
}
.head {
width: 200px;
margin: 0 auto;
height: 150px;
border-radius: 200px 200px 0 0;
margin-bottom: 10px;
}
.eyes {
display: flex;
align-items: center;
}
.head:hover {
width: 300px;
}
.upper_body {
width: 300px;
height: 150px;
display: flex;
}
.left_arm,
.right_arm {
width: 40px;
height: 125px;
border-radius: 100px;
}
.left_arm {
margin-right: 10px;
}
.right_arm {
margin-left: 10px;
}
.torso {
width: 200px;
height: 200px;
border-radius: 0 0 50px 50px;
}
.lower_body {
width: 200px;
height: 200px;
/* This is another useful property. Hmm what do you think it does?*/
margin: 0 auto;
display: flex;
justify-content: center;
}
.left_leg,
.right_leg {
width: 40px;
height: 120px;
border-radius: 0 0 100px 100px;
}
.left_leg {
margin-right: 30px;
}
.left_leg:hover {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
.right_leg {
margin-left: 30px;
}
.right_leg:hover {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(340deg);
}
.left_eye,
.right_eye {
width: 20px;
height: 20px;
border-radius: 15px;
background-color: white;
}
.left_eye {
/* These properties are new and you haven't encountered
in this course. Check out CSS Tricks to see what it does! */
position: relative;
top: 100px;
left: 40px;
}
.right_eye {
position: relative;
top: 100px;
left: 120px;
}
.eyes{
width:200px;
margin:0 auto;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<h1>Robot Friend</h1>
<div class="robots">
<div class="android">
<div class="head">
<div class="eyes">
<div class="left_eye"></div>
<div class="right_eye"></div>
</div>
</div>
<div class="upper_body">
<div class="left_arm"></div>
<div class="torso"></div>
<div class="right_arm"></div>
</div>
<div class="lower_body">
<div class="left_leg"></div>
<div class="right_leg"></div>
</div>
</div>
</div>
The eyes are relatively positioned. Try this, at the end of your CSS:
.head:hover .right_eye {
left: 170px;
}
.head:hover .left_eye {
left: 100px;
}
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.