Alignment Fix in html/css - javascript

I have the following code:
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1 {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 20px;
overflow: hidden;
}
.square {
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-left: auto;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
#media screen and (max-width: 480px) {
.square {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
#media screen and (max-width: 480px) {
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
}
}
/* iframe css*/
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
.iframe {
height: 1070px;
margin-left: auto;
margin-right: auto;
width: 80%;
}
#media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
.iframe {
height: 130vw;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>
I want the corner of the blog card to be perfectly aligned under the corner of the iFrame. The first corner of the blog card should be right under the first corner of the iFrame.
Expected Output
Expected Output
How would I modify the CSS to have it output as the above picture? Adding margin-left: auto on square does not work. Any suggestions would greatly help! Thanks a lot!


My suggestion is to remove the grid and padding from .container1, align the iframe left, and set both left margins to 10%.
Since the iframe is width:80%, 10% on each side will center it. And the matching margin on the top element will align the left edges of the two elements.
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.square {
max-width: 460px;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-left: 10%;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
.iframe {
height: 1070px;
margin-left: 10%;
width: 80%;
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>

Related

Why is my automatic chatbox not showing up?

So when i click "chat with us", the full chat box must appear but it doesn't. The console announces mistake as:'Uncaught TypeError: Cannot read property 'style' of null
at HTMLButtonElement. '
Anything wrong with my codes? somebody can help me? Thank you so much!
This is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Snake</title>
<link rel="stylesheet" href="chat.css">
<script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="chat-bar-collapsible">
<button id="chat-bar-button" type="button" class="collapsible">Chat With Us!
<i id="chat-icon" style="color: #fff;" class="fas fa-fw fa-comment-o"></i>
</button>
</div>
<div class="content">
<div class="full-chat-block">
<!--Mesage Container-->
<div class="outer-container">
<div class="container">
<!--Messages-->
<div id="chatbox">
<h5 id="chat-timestamp"></h5>
<p id="botStarterMessages " class="botText"><span>loading...</span></p>
</div>
<!--User Input Box-->
<div class="chat-bar-input-block">
<div id="user-input">
<input type="text" id="textInput" class="input-box" placeholder="Tap 'enter' to send a mesage" />
<p></p>
</div>
<div class="chat-bar-icons">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
</html>
This is my css:
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 50px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.collapsible {
background-color: rgb(82, 151, 255);
color: white;
cursor: pointer;
padding: 18px;
width: 350px;
text-align: left;
outline: none;
font-size: 18px;
border-radius: 10px 10px 0px 0px;
border: 3px solid white;
border-bottom: none;
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.full-chat-block {
width: 350px;
background: white;
text-align: center;
overflow: auto;
scrollbar-width: none;
height: max-content;
transition: max-height 0.2s ease-out;
}
.outer-container {
min-height: 500px;
bottom: 0%;
position: relative;
}
.chat-container {
max-height: 500px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
scroll-behavior: smooth;
hyphens: auto;
}
.chat-container::-webkit-scrollbar {
display: none;
}
.chat-bar-input-block {
display: flex;
float: left;
box-sizing: border-box;
justify-content: space-between;
width: 100%;
align-items: center;
background-color: rgb(235, 235, 235);
border-radius: 10px 10px 0px 0px;
padding: 10px 0px 10px 10px;
}
.chat-bar-icons {
display: flex;
justify-content: space-evenly;
box-sizing: border-box;
width: 25%;
float: right;
font-size: 20px;
}
#chat-icon:hover {
opacity: .7;
}
/* Chat bubbles */
#userInput {
width: 75%;
}
.input-box {
float: left;
border: none;
box-sizing: border-box;
width: 100%;
border-radius: 10px;
padding: 10px;
font-size: 16px;
color: #000;
background-color: white;
outline: none
}
.userText {
color: white;
font-family: Helvetica;
font-size: 16px;
font-weight: normal;
text-align: right;
clear: both;
}
.userText span {
line-height: 1.5em;
display: inline-block;
background: #5ca6fa;
padding: 10px;
border-radius: 8px;
border-bottom-right-radius: 2px;
max-width: 80%;
margin-right: 10px;
animation: floatup .5s forwards
}
.botText {
color: #000;
font-family: Helvetica;
font-weight: normal;
font-size: 16px;
text-align: left;
}
.botText span {
line-height: 1.5em;
display: inline-block;
background: #e0e0e0;
padding: 10px;
border-radius: 8px;
border-bottom-left-radius: 2px;
max-width: 80%;
margin-left: 10px;
animation: floatup .5s forwards
}
#keyframes floatup {
from {
transform: translateY(14px);
opacity: .0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
#media screen and (max-width:600px) {
.full-chat-block {
width: 100%;
border-radius: 0px;
}
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
}
.collapsible {
width: 100%;
border: 0px;
border-top: 3px solid white;
border-radius: 0px;
}
}
This is my JS:
var coll = document.getElementsByClassName('collapsible')
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener('click', function() {
this.classList.toggle('active')
var content = this.nextElementSibling
if (content.style.maxHeight) {
content.style.maxHeight = null
} else {
content.style.maxHeight = content.scrollHeight + "px"
}
})
}

Using .nextSibling will look directly for the next child element under your parent div. Since this refers to your button inside of chat-bar-collapsible there are no more child elements that are adjacent to your button element under the char-bar-collapsible div. You need to walk up to the parent element using .parentNode, and then access the adjacent content div from that using .nextElementSibling:
var content = this.parentNode.nextElementSibling;
var coll = document.getElementsByClassName('collapsible');
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener('click', function() {
this.classList.toggle('active');
var content = this.parentNode.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null
} else {
content.style.maxHeight = content.scrollHeight + "px"
}
})
}
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 50px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.collapsible {
background-color: rgb(82, 151, 255);
color: white;
cursor: pointer;
padding: 18px;
width: 350px;
text-align: left;
outline: none;
font-size: 18px;
border-radius: 10px 10px 0px 0px;
border: 3px solid white;
border-bottom: none;
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.full-chat-block {
width: 350px;
background: white;
text-align: center;
overflow: auto;
scrollbar-width: none;
height: max-content;
transition: max-height 0.2s ease-out;
}
.outer-container {
min-height: 500px;
bottom: 0%;
position: relative;
}
.chat-container {
max-height: 500px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
scroll-behavior: smooth;
hyphens: auto;
}
.chat-container::-webkit-scrollbar {
display: none;
}
.chat-bar-input-block {
display: flex;
float: left;
box-sizing: border-box;
justify-content: space-between;
width: 100%;
align-items: center;
background-color: rgb(235, 235, 235);
border-radius: 10px 10px 0px 0px;
padding: 10px 0px 10px 10px;
}
.chat-bar-icons {
display: flex;
justify-content: space-evenly;
box-sizing: border-box;
width: 25%;
float: right;
font-size: 20px;
}
#chat-icon:hover {
opacity: .7;
}
/* Chat bubbles */
#userInput {
width: 75%;
}
.input-box {
float: left;
border: none;
box-sizing: border-box;
width: 100%;
border-radius: 10px;
padding: 10px;
font-size: 16px;
color: #000;
background-color: white;
outline: none
}
.userText {
color: white;
font-family: Helvetica;
font-size: 16px;
font-weight: normal;
text-align: right;
clear: both;
}
.userText span {
line-height: 1.5em;
display: inline-block;
background: #5ca6fa;
padding: 10px;
border-radius: 8px;
border-bottom-right-radius: 2px;
max-width: 80%;
margin-right: 10px;
animation: floatup .5s forwards
}
.botText {
color: #000;
font-family: Helvetica;
font-weight: normal;
font-size: 16px;
text-align: left;
}
.botText span {
line-height: 1.5em;
display: inline-block;
background: #e0e0e0;
padding: 10px;
border-radius: 8px;
border-bottom-left-radius: 2px;
max-width: 80%;
margin-left: 10px;
animation: floatup .5s forwards
}
#keyframes floatup {
from {
transform: translateY(14px);
opacity: .0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
#media screen and (max-width:600px) {
.full-chat-block {
width: 100%;
border-radius: 0px;
}
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
}
.collapsible {
width: 100%;
border: 0px;
border-top: 3px solid white;
border-radius: 0px;
}
}
<script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
<div class="chat-bar-collapsible">
<button id="chat-bar-button" type="button" class="collapsible">Chat With Us!<i id="chat-icon" style="color: #fff;" class="fas fa-fw fa-comment-o"></i></button>
</div>
<div class="content">
<div class="full-chat-block">
<!--Mesage Container-->
<div class="outer-container">
<div class="container">
<!--Messages-->
<div id="chatbox">
<h5 id="chat-timestamp"></h5>
<p id="botStarterMessages " class="botText"><span>loading...</span></p>
</div>
<!--User Input Box-->
<div class="chat-bar-input-block">
<div id="user-input">
<input type="text" id="textInput" class="input-box" placeholder="Tap 'enter' to send a mesage" />
<p></p>
</div>
<div class="chat-bar-icons">
</div>
</div>
</div>
</div>
</div>
</div>

How to make element stretch vertically and not affect look?

I have a page that looks like this.
//$(document).ready(function() {
// function viewport_height() {
// var window_height = $(window).height();
// $('#wrapper').height(window_height);
// $('#chat-area').height = $(window_height);
// }
// viewport_height();
// $(window).resize(function() {
// viewport_height();
// });
//});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #f7f7f7;
padding: 0 10px;
}
.wrapper{
background: #fff;
max-width: 450px;
width: 100%;
border-radius: 16px;
box-shadow:
0 0 128px 0 rgba(0, 0, 0, 0.1),
0 32px 64px -48px rgba(0, 0, 0, 0.5);
}
/* Login & Signup Form CSS Start */
.form{
padding: 25px 30px;
}
.form header{
font-size: 25px;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 1px solid #e6e6e6;
}
.form form{
margin: 20px 0;
}
.form form .error-text{
color: #721c24;
padding: 8px 10px;
text-align: center;
border-radius: 5px;
background: #f8d7da;
border: 1px solid #f5c6cb;
margin-bottom: 10px;
display: none;
}
.form form .name-details{
display: flex;
}
.form .name-details .field:first-child{
margin-right: 10px;
}
.form .name-details .field:last-child{
margin-left: 10px;
}
.form form .field{
display: flex;
margin-bottom: 10px;
flex-direction: column;
position: relative;
}
.form form .field label{
margin-bottom: 2px;
}
.form form .input input{
height: 40px;
width: 100%;
font-size: 16px;
padding: 0 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.form form .field input{
outline: none;
}
.form form .image input{
font-size: 17px;
}
.form form .button input{
height: 45px;
border: none;
color: #fff;
font-size: 17px;
background: #333;
border-radius: 5px;
cursor: pointer;
margin-top: 13px;
}
.form form .field i{
position: absolute;
right: 15px;
top: 70%;
color: #ccc;
cursor: pointer;
transform: translateY(-50%);
}
.form form .field i.active::before{
color: #333;
content: "\f070";
}
.form .link{
text-align: center;
margin: 10px 0;
font-size: 17px;
}
.form .link a{
color: #333;
}
.form .link a:hover{
text-decoration: underline;
}
/* Users List CSS Start */
.users{
padding: 25px 30px;
}
.users header,
.users-list a{
display: flex;
align-items: center;
padding-bottom: 20px;
border-bottom: 1px solid #e6e6e6;
justify-content: space-between;
}
.wrapper img{
object-fit: cover;
border-radius: 50%;
}
.users header img{
height: 50px;
width: 50px;
}
:is(.users, .users-list) .content{
display: flex;
align-items: center;
}
:is(.users, .users-list) .content .details{
color: #000;
margin-left: 20px;
}
:is(.users, .users-list) .details span{
font-size: 18px;
font-weight: 500;
}
.users header .logout{
display: block;
background: #333;
color: #fff;
outline: none;
border: none;
padding: 7px 15px;
text-decoration: none;
border-radius: 5px;
font-size: 17px;
}
.users .search{
margin: 20px 0;
display: flex;
position: relative;
align-items: center;
justify-content: space-between;
}
.users .search .text{
font-size: 18px;
}
.users .search input{
position: absolute;
height: 42px;
width: calc(100% - 50px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6;
outline: none;
border-radius: 5px 0 0 5px;
opacity: 0;
pointer-events: none;
transition: all 0.2s ease;
}
.users .search input.show{
opacity: 1;
pointer-events: auto;
}
.users .search button{
position: relative;
z-index: 1;
width: 47px;
height: 42px;
font-size: 17px;
cursor: pointer;
border: none;
background: #fff;
color: #333;
outline: none;
border-radius: 0 5px 5px 0;
transition: all 0.2s ease;
}
.users .search button.active{
background: #333;
color: #fff;
}
.search button.active i::before{
content: '\f00d';
}
.users-list{
max-height: 350px;
overflow-y: auto;
}
:is(.users-list, .chat-box)::-webkit-scrollbar{
width: 0px;
}
.users-list a{
padding-bottom: 10px;
margin-bottom: 15px;
padding-right: 15px;
border-bottom-color: #f1f1f1;
}
.users-list a:last-child{
margin-bottom: 0px;
border-bottom: none;
}
.users-list a img{
height: 40px;
width: 40px;
}
.users-list a .details p{
color: #67676a;
}
.users-list a .status-dot{
font-size: 12px;
color: #468669;
padding-left: 10px;
}
.users-list a .status-dot.offline{
color: #ccc;
}
/* Chat Area CSS Start */
.chat-area header{
display: flex;
align-items: center;
padding: 18px 30px;
}
.chat-area header .back-icon{
color: #333;
font-size: 18px;
}
.chat-area header img{
height: 45px;
width: 45px;
margin: 0 15px;
}
.chat-area header .details span{
font-size: 17px;
font-weight: 500;
}
.chat-box{
position: relative;
min-height: 500px;
max-height: 500px;
overflow-y: auto;
padding: 10px 30px 20px 30px;
background: #f7f7f7;
box-shadow: inset 0 32px 32px -32px rgb(0 0 0 / 5%),
inset 0 -32px 32px -32px rgb(0 0 0 / 5%);
}
.chat-box .text{
position: absolute;
top: 45%;
left: 50%;
width: calc(100% - 50px);
text-align: center;
transform: translate(-50%, -50%);
}
.chat-box .chat{
margin: 15px 0;
}
.chat-box .chat p{
word-wrap: break-word;
padding: 8px 16px;
box-shadow: 0 0 32px rgb(0 0 0 / 8%),
0rem 16px 16px -16px rgb(0 0 0 / 10%);
}
.chat-box .outgoing{
display: flex;
}
.chat-box .outgoing .details{
margin-left: auto;
max-width: calc(100% - 130px);
}
.outgoing .details p{
background: #333;
color: #fff;
border-radius: 18px 18px 0 18px;
}
.chat-box .incoming{
display: flex;
align-items: flex-end;
}
.chat-box .incoming img{
height: 35px;
width: 35px;
}
.chat-box .incoming .details{
margin-right: auto;
margin-left: 10px;
max-width: calc(100% - 130px);
}
.incoming .details p{
background: #fff;
color: #333;
border-radius: 18px 18px 18px 0;
}
.typing-area{
padding: 18px 30px;
display: flex;
justify-content: space-between;
}
.typing-area input{
height: 45px;
width: calc(100% - 58px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6;
outline: none;
border-radius: 5px 0 0 5px;
}
.typing-area button{
color: #fff;
width: 55px;
border: none;
outline: none;
background: #333;
font-size: 19px;
cursor: pointer;
opacity: 0.7;
pointer-events: none;
border-radius: 0 5px 5px 0;
transition: all 0.3s ease;
}
.typing-area button.active{
opacity: 1;
pointer-events: auto;
}
/* Responive media query */
#media screen and (max-width: 450px) {
.form, .users{
padding: 20px;
}
.form header{
text-align: center;
}
.form form .name-details{
flex-direction: column;
}
.form .name-details .field:first-child{
margin-right: 0px;
}
.form .name-details .field:last-child{
margin-left: 0px;
}
.users header img{
height: 45px;
width: 45px;
}
.users header .logout{
padding: 6px 10px;
font-size: 16px;
}
:is(.users, .users-list) .content .details{
margin-left: 15px;
}
.users-list a{
padding-right: 10px;
}
.chat-area header{
padding: 15px 20px;
}
.chat-box{
min-height: 400px;
padding: 10px 15px 15px 20px;
}
.chat-box .chat p{
font-size: 15px;
}
.chat-box .outogoing .details{
max-width: 230px;
}
.chat-box .incoming .details{
max-width: 265px;
}
.incoming .details img{
height: 30px;
width: 30px;
}
.chat-area form{
padding: 20px;
}
.chat-area form input{
height: 40px;
width: calc(100% - 48px);
}
.chat-area form button{
width: 45px;
}
}
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Online Chat App | Hello World</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head><body>
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>-->
<div class="wrapper" id="wrapper">
<section class="chat-area" id="chat-area">
<header>
<div class="details">
<span>User</span>
<p>Active now</p>
</div>
</header>
<div class="chat-box">
<div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat outgoing">
<div class="details">
<p>tst</p>
</div>
</div><div class="chat outgoing">
<div class="details">
<p>test</p>
</div>
</div><div class="chat outgoing">
<div class="details">
<p>test</p>
</div>
</div></div>
<form action="#" class="typing-area">
<input type="text" class="incoming_id" name="incoming_id" value="340930066" hidden="">
<input type="text" name="message" class="input-field" placeholder="Type a message here..." autocomplete="off">
<button><i class="fab fa-telegram-plane"></i></button>
</form>
</section>
</div>
</body></html>
I want the <div class="wrapper"> to resize vertically when height of the device doesn't fit. So when I shrink my browser to a smaller height it will look shrink with it. Also I want the look to stay. I tried to do display: flex; but it just made everything go everywhere. I can't seem to do it. I am trying to do it with JavaScript, but it doesn't work the way it should. Changing the viewport height does not help.

Is this what you are looking for? I wasn't 100% sure from the description
The only css I added are at the bottom of the css section
.chat-area {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.chat-area header,
.chat-area typing-area {
flex-shrink: 0;
}
.chat-box {
flex-grow: 1;
min-height: auto;
}
The above is the only css I added, the min-height: auto; was to override your original code. Original code is not modified
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #f7f7f7;
padding: 0 10px;
}
.wrapper {
background: #fff;
max-width: 450px;
width: 100%;
border-radius: 16px;
box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1), 0 32px 64px -48px rgba(0, 0, 0, 0.5);
}
/* Login & Signup Form CSS Start */
.form {
padding: 25px 30px;
}
.form header {
font-size: 25px;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 1px solid #e6e6e6;
}
.form form {
margin: 20px 0;
}
.form form .error-text {
color: #721c24;
padding: 8px 10px;
text-align: center;
border-radius: 5px;
background: #f8d7da;
border: 1px solid #f5c6cb;
margin-bottom: 10px;
display: none;
}
.form form .name-details {
display: flex;
}
.form .name-details .field:first-child {
margin-right: 10px;
}
.form .name-details .field:last-child {
margin-left: 10px;
}
.form form .field {
display: flex;
margin-bottom: 10px;
flex-direction: column;
position: relative;
}
.form form .field label {
margin-bottom: 2px;
}
.form form .input input {
height: 40px;
width: 100%;
font-size: 16px;
padding: 0 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.form form .field input {
outline: none;
}
.form form .image input {
font-size: 17px;
}
.form form .button input {
height: 45px;
border: none;
color: #fff;
font-size: 17px;
background: #333;
border-radius: 5px;
cursor: pointer;
margin-top: 13px;
}
.form form .field i {
position: absolute;
right: 15px;
top: 70%;
color: #ccc;
cursor: pointer;
transform: translateY(-50%);
}
.form form .field i.active::before {
color: #333;
content: "\f070";
}
.form .link {
text-align: center;
margin: 10px 0;
font-size: 17px;
}
.form .link a {
color: #333;
}
.form .link a:hover {
text-decoration: underline;
}
/* Users List CSS Start */
.users {
padding: 25px 30px;
}
.users header,
.users-list a {
display: flex;
align-items: center;
padding-bottom: 20px;
border-bottom: 1px solid #e6e6e6;
justify-content: space-between;
}
.wrapper img {
object-fit: cover;
border-radius: 50%;
}
.users header img {
height: 50px;
width: 50px;
}
:is(.users,
.users-list) .content {
display: flex;
align-items: center;
}
:is(.users,
.users-list) .content .details {
color: #000;
margin-left: 20px;
}
:is(.users,
.users-list) .details span {
font-size: 18px;
font-weight: 500;
}
.users header .logout {
display: block;
background: #333;
color: #fff;
outline: none;
border: none;
padding: 7px 15px;
text-decoration: none;
border-radius: 5px;
font-size: 17px;
}
.users .search {
margin: 20px 0;
display: flex;
position: relative;
align-items: center;
justify-content: space-between;
}
.users .search .text {
font-size: 18px;
}
.users .search input {
position: absolute;
height: 42px;
width: calc(100% - 50px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6;
outline: none;
border-radius: 5px 0 0 5px;
opacity: 0;
pointer-events: none;
transition: all 0.2s ease;
}
.users .search input.show {
opacity: 1;
pointer-events: auto;
}
.users .search button {
position: relative;
z-index: 1;
width: 47px;
height: 42px;
font-size: 17px;
cursor: pointer;
border: none;
background: #fff;
color: #333;
outline: none;
border-radius: 0 5px 5px 0;
transition: all 0.2s ease;
}
.users .search button.active {
background: #333;
color: #fff;
}
.search button.active i::before {
content: '\f00d';
}
.users-list {
max-height: 350px;
overflow-y: auto;
}
:is(.users-list,
.chat-box)::-webkit-scrollbar {
width: 0px;
}
.users-list a {
padding-bottom: 10px;
margin-bottom: 15px;
padding-right: 15px;
border-bottom-color: #f1f1f1;
}
.users-list a:last-child {
margin-bottom: 0px;
border-bottom: none;
}
.users-list a img {
height: 40px;
width: 40px;
}
.users-list a .details p {
color: #67676a;
}
.users-list a .status-dot {
font-size: 12px;
color: #468669;
padding-left: 10px;
}
.users-list a .status-dot.offline {
color: #ccc;
}
/* Chat Area CSS Start */
.chat-area header {
display: flex;
align-items: center;
padding: 18px 30px;
}
.chat-area header .back-icon {
color: #333;
font-size: 18px;
}
.chat-area header img {
height: 45px;
width: 45px;
margin: 0 15px;
}
.chat-area header .details span {
font-size: 17px;
font-weight: 500;
}
.chat-box {
position: relative;
min-height: 500px;
max-height: 500px;
overflow-y: auto;
padding: 10px 30px 20px 30px;
background: #f7f7f7;
box-shadow: inset 0 32px 32px -32px rgb(0 0 0 / 5%), inset 0 -32px 32px -32px rgb(0 0 0 / 5%);
}
.chat-box .text {
position: absolute;
top: 45%;
left: 50%;
width: calc(100% - 50px);
text-align: center;
transform: translate(-50%, -50%);
}
.chat-box .chat {
margin: 15px 0;
}
.chat-box .chat p {
word-wrap: break-word;
padding: 8px 16px;
box-shadow: 0 0 32px rgb(0 0 0 / 8%), 0rem 16px 16px -16px rgb(0 0 0 / 10%);
}
.chat-box .outgoing {
display: flex;
}
.chat-box .outgoing .details {
margin-left: auto;
max-width: calc(100% - 130px);
}
.outgoing .details p {
background: #333;
color: #fff;
border-radius: 18px 18px 0 18px;
}
.chat-box .incoming {
display: flex;
align-items: flex-end;
}
.chat-box .incoming img {
height: 35px;
width: 35px;
}
.chat-box .incoming .details {
margin-right: auto;
margin-left: 10px;
max-width: calc(100% - 130px);
}
.incoming .details p {
background: #fff;
color: #333;
border-radius: 18px 18px 18px 0;
}
.typing-area {
padding: 18px 30px;
display: flex;
justify-content: space-between;
}
.typing-area input {
height: 45px;
width: calc(100% - 58px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6;
outline: none;
border-radius: 5px 0 0 5px;
}
.typing-area button {
color: #fff;
width: 55px;
border: none;
outline: none;
background: #333;
font-size: 19px;
cursor: pointer;
opacity: 0.7;
pointer-events: none;
border-radius: 0 5px 5px 0;
transition: all 0.3s ease;
}
.typing-area button.active {
opacity: 1;
pointer-events: auto;
}
/* Responive media query */
#media screen and (max-width: 450px) {
.form,
.users {
padding: 20px;
}
.form header {
text-align: center;
}
.form form .name-details {
flex-direction: column;
}
.form .name-details .field:first-child {
margin-right: 0px;
}
.form .name-details .field:last-child {
margin-left: 0px;
}
.users header img {
height: 45px;
width: 45px;
}
.users header .logout {
padding: 6px 10px;
font-size: 16px;
}
:is(.users,
.users-list) .content .details {
margin-left: 15px;
}
.users-list a {
padding-right: 10px;
}
.chat-area header {
padding: 15px 20px;
}
.chat-box {
min-height: 400px;
padding: 10px 15px 15px 20px;
}
.chat-box .chat p {
font-size: 15px;
}
.chat-box .outogoing .details {
max-width: 230px;
}
.chat-box .incoming .details {
max-width: 265px;
}
.incoming .details img {
height: 30px;
width: 30px;
}
.chat-area form {
padding: 20px;
}
.chat-area form input {
height: 40px;
width: calc(100% - 48px);
}
.chat-area form button {
width: 45px;
}
}
.chat-area {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.chat-area header,
.chat-area typing-area {
flex-shrink: 0;
}
.chat-box {
flex-grow: 1;
min-height: auto;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Online Chat App | Hello World</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body>
<input id="hidden" type="hidden" value="7">
<div class="wrapper">
<section class="chat-area">
<header>
<i class="fas fa-arrow-left"></i>
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<span>Justin Skinner</span>
<p>Active now</p>
</div>
</header>
<div class="chat-box">
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat outgoing">
<div class="details">
<p>tst</p>
</div>
</div>
<div class="chat outgoing">
<div class="details">
<p>test</p>
</div>
</div>
<div class="chat outgoing">
<div class="details">
<p>test</p>
</div>
</div>
</div>
<form action="#" class="typing-area">
<input type="text" class="incoming_id" name="incoming_id" value="340930066" hidden="">
<input type="text" name="message" class="input-field" placeholder="Type a message here..." autocomplete="off">
<button><i class="fab fa-telegram-plane"></i></button>
</form>
</section>
</div>
<script src="javascript/chat.js"></script>
</body>
</html>

Here's how to do it with flexbox using this answer.
JSFiddle
body{
height:100vh
}
.wrapper{
height:100%;
}
.chat-area{
display: flex; /* displays flex-items (children) inline */
flex-direction: column; /* stacks them vertically */
height: 100%; /* needs to take the parents height, alternative: body {display: flex} */
}
.chat-box{
flex: 1; /* takes the remaining height of the "container" div */
overflow: auto; /* to scroll just the "main" div */
}

Profile card going outside of the browser window

I want to achieve the mini profile view like in twitter. When we hover a user's name, his mini profile view is coming. But my problem it is going outside of the browser window. I need to adjust it according to the viewport. It should go outside of the window, it should adjust automatically.
it is coming this way
I need it this way
here is the code
<div class="popover__wrapper">
<a>Cyril</a>
<div class="push popover__content">
<div class="contact-card-user">
<div class="left-side">
<img src="../assets/img/profiles/male-user.jpg" alt="">
</div>
<div class="right-side">
<div class="details-wrapper">
<h3>Full Name </h3>
<div class="privilege">Administrator</div>
<div class="designation">Designer</div>
<div class="description">+973 1234 5678</div>
<div class="description">info#company.com</div>
</div>
</div>
</div>
</div>
<style>
.popover__wrapper {
position: relative;
margin-top: 0;
display: block;
cursor: pointer;
}
.popover__content {
opacity: 0;
visibility: hidden;
position: absolute;
left: 40px;
bottom: -90px;
transform: translate(0, 30px);
background-color: transparent;
padding: 0;
width: auto;
}
.popover__content:before {
position: absolute;
z-index: -1;
content: '';
left: -20px;
bottom: 100px;
border-style: solid;
border-width: 10px 10px 10px 10px;
border-color: transparent transparent transparent #a5053d;
transition-duration: 0.3s;
transition-property: transform;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.contact-card-user {
background: #fff;
display: flex;
width: max-content;
box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.05);
}
.contact-card-user .left-side {
margin-right: 20px;
width: 100%;
max-width: 200px;
}
.contact-card-user .left-side img {
width: 100%;
height: auto;
}
.contact-card-user .right-side {
padding-left: 3px;
padding-top: 5px;
padding-bottom: 10px;
padding-right: 25px;
width: 100%;
max-width: 260px;
}
.contact-card-user .details-wrapper {
text-align: left;
}
.contact-card-user .details-wrapper h3 {
color: #333;
font-size: 16px;
white-space: pre-wrap;
overflow: hidden;
margin-bottom: 1px;
line-height: normal;
}
.contact-card-user .details-wrapper .privilege {
display: inline-block;
color: #a5053c;
font-weight: 400;
font-size: 14px;
letter-spacing: 0.7px;
margin-bottom: 13px;
margin-top: 6px;
border-bottom: 1px solid #00a000;
}
.contact-card-user .details-wrapper .designation {
color: #333;
margin-bottom: 5px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
</style>
I think may be javascript can solve. Any help?
Thank you

Selected text fades away in a 640px or less viewport

I have a page that if you click one of the boxes shown in my snippet, a checkmark shows up and the content inside of shows as if it is active after you move the mouse away from it. However, when viewed with a viewport of 640px or less, the text inside of the boxes fades away after you select it and select something else. It is not doing this in a normal desktop view, so why is it doing it withing that specific media query? I did not make any changes to my .box-focused css in the media query at all, nor did I even include it because I wanted everything the same.
Does anyone see what it is that is causing this to happen?
$('.project-option-boxes').click(function() {
$(this).hide().toggleClass('box_focused').fadeIn('slow');
});
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
transition: ease-in-out .5s;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
transition: ease-in-out .5s;
}
.box_focused {
background-color: #45ba95;
color: #FFF;
background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png");
background-position: left center;
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 5% 50%;
}
#media screen and (max-width:640px) {
.project-option-boxes {
display: block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 15px 0px 15px 0px;
width: 85%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>

You aren't setting the colours correctly for the focused styles in the media query. See my addition of the box_focused class to the media query below.
$('.project-option-boxes').click(function() {
$(this).hide().toggleClass('box_focused').fadeIn('slow');
});
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
transition: ease-in-out .5s;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
transition: ease-in-out .5s;
}
.box_focused {
background-color: #45ba95;
color: #FFF;
background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png");
background-position: left center;
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 5% 50%;
}
#media screen and (max-width:640px) {
.project-option-boxes {
display: block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 15px 0px 15px 0px;
width: 85%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover, .box_focused {
background-color: #45ba95;
color: #FFF;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>

You have to have the same css settings copied into the media query for the same to apply. its because the scope limits what code is read
$('.project-option-boxes').click(function() {
$(this).hide().toggleClass('box_focused').fadeIn('slow');
});
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
transition: ease-in-out .5s;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
transition: ease-in-out .5s;
}
.box_focused {
background-color: #45ba95;
color: #FFF;
background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png");
background-position: left center;
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 5% 50%;
}
#media screen and (max-width:640px) {
.project-option-boxes {
display: block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 15px 0px 15px 0px;
width: 85%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
transition: ease-in-out .5s;
}
.box_focused {
background-color: #45ba95;
color: #FFF;
background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png");
background-position: left center;
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 5% 50%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>

CSS :hover not applied on some elements

I experience a strange problem..
On some elements the :hover effect is not applied
html,
body {
height: 100%;
}
body {
margin: 0;
color: #3b3b3b;
font-family: tahoma;
font-size: 12px;
background: #f5f5f5;
}
body.toggle {
overflow: hidden;
}
#main_content {
height: 100%;
}
#preloader_content {
z-index: 99999;
position: absolute;
top: 0;
left: 0;
background: #303030;
width: 100%;
height: 100%;
}
#preloader_content > div {
position: absolute;
width: 200px;
}
#preloader_percentage {
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
font-size: 32px;
font-family: arial;
font-weight: bold;
text-align: center;
}
#container {
padding-top: 80px;
height: 100%;
box-sizing: border-box;
}
#header {
position: fixed;
top: 0;
z-index: 1;
height: 80px;
min-width: 600px;
width: 100%;
box-sizing: border-box;
}
#header_mobile {
height: 100%;
display: none;
box-sizing: border-box;
background: #303030;
color: #d9d9d9;
}
#header_desktop {
height: 100%;
margin-left: 200px;
box-sizing: border-box;
background: #fff;
}
#sidebar {
position: fixed;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
width: 200px;
background: #303030;
color: #d9d9d9;
box-sizing: border-box;
}
#sidebar.toggle {
z-index: 0;
display: block;
}
#logo {
position: absolute;
}
#menu {
position: absolute;
top: 80px;
width: 100%;
bottom: 0;
overflow-y: auto;
}
#main {
position: absolute;
z-index: -1;
min-width: 600px;
width: 100%;
max-width: 1400px;
padding-left: 200px;
box-sizing: border-box;
}
.mobile_header_actions {
float: right;
}
.mobile_header_actions > div {
display: inline-block;
margin-right: 20px;
}
.btn_mobile_header_toggle {
background: url(/gfx/btn.mobile_header_toggle.png) no-repeat center;
cursor: pointer;
height: 50px;
width: 50px;
}
.btn_mobile_header_toggle.toggle {
background-color: rgba(0, 0, 0, 0.5);
}
.sidebar_page_ul,
.sidebar_subpage_ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
.sidebar_section {
padding: 10px 10px 10px 20px;
font-size: 11px;
color: #c2c2c2;
}
.sidebar_page {
padding: 10px 10px 10px 30px;
font-size: 13px;
font-weight: bold;
transition: background-color 0.2s ease 0s;
cursor: pointer;
}
.sidebar_arrow {
background: url(/gfx/sidebar_arrow.png) no-repeat center;
float: right;
height: 18px;
width: 18px;
}
.sidebar_arrow.active {
transform: rotate(90deg);
}
.sidebar_subpage_ul {
display: none;
}
.sidebar_subpage_ul.active {
display: block;
}
.sidebar_subpage {
padding: 10px 10px 10px 30px;
background-color: rgba(0, 0, 0, 0.35);
font-size: 13px;
transition: background-color 0.2s ease 0s;
cursor: pointer;
opacity: 0;
}
.sidebar_page.active,
.sidebar_page:hover,
.sidebar_subpage.active,
.sidebar_subpage:hover {
background-color: rgba(0, 0, 0, 0.2);
color: #fff;
}
#media (max-width: 767px) {
#container {
padding-top: 50px;
}
#header {
height: 50px;
}
#header_mobile {
display: block;
}
#header_desktop {
display: none;
}
#sidebar {
display: none;
}
#menu {
top: 50px;
}
#main {
padding-left: 0;
}
}
#media (min-width: 768px) {
#sidebar {
width: 200px !important;
}
#main {
left: 0 !important;
}
}
#media (min-width: 992px) {}#media (min-width: 1200px) {} button {
background:linear-gradient(#f5f5f5,
#f1f1f1);
border:1px solid rgba(0,
0,
0,
0.1);
box-sizing:content-box;
border-radius:2px;
display:inline-block;
min-width:50px;
color:#444;
font-size:11px;
font-weight:bold;
padding:4px 8px 5px 8px;
text-align:center;
transition:all 300ms ease 0s;
margin:0 6px 0 0;
cursor:pointer;
}
button:hover {
background: linear-gradient(#f8f8f8, #f1f1f1);
border-color: #c6c6c6;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
color: #222;
}
button.cta {
background: linear-gradient(#4d90fe, #4787ed);
border: 1px solid #3079ed;
color: #fff;
}
button.cta:hover {
background: linear-gradient(#4d90fe, #357ae8);
border-color: #2f5bb7;
}
<div id="main_content">
<div id="container">
<div id="header">
<div id="header_mobile">Header Mobile
<button class="cta" id="e1">Log off</button>
<div class="mobile_header_actions">
<div class="btn_mobile_header_toggle" id="e3"></div>
</div>
</div>
<div id="header_desktop">Header Desktop
<button class="cta" id="e2">Log off</button>
</div>
</div>
<div id="sidebar">
<div id="logo">Logo</div>
<div id="menu">
<div id="e0">
<ul class="sidebar_page_ul">
<li>
<div class="sidebar_section">Accounts</div>
</li>
<li>
<div class="sidebar_page" id="e4">Overview</div>
</li>
<li>
<div class="sidebar_page" id="e5">Bookkeeping
<div class="sidebar_arrow"></div>
</div>
<ul class="sidebar_subpage_ul" id="e6">
<li>
<div class="sidebar_subpage" id="e7">Bilag</div>
</li>
<li>
<div class="sidebar_subpage" id="e8">Daglig</div>
</li>
</ul>
</li>
<li>
<div class="sidebar_page active" id="e9">
Chart of accounts
</div>
</li>
<li>
<div class="sidebar_section">Administration</div>
</li>
<li>
<div class="sidebar_page" id="e10">Client</div>
</li>
<li>
<div class="sidebar_page" id="e11">Accounts</div>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<div style="padding:20px">
account
<button>Test</button>
<button class="cta">Test</button>
</div>
</div>
</div>
</div>
The logoff button in the header has the :hover effect but the two Test buttons in the main content hasn't
What am I doing wrong?!

That's because the #main style has z-index: -1. That places it behind the container element.

You have
#main {
position: absolute;
z-index: -1;
}
#main's parent, #container, doesn't create any stacking context (because it has default opacity and isn't a positioned element with z-index different than auto). Therefore, #main and #container belong to the same stacking context.
Then, since #main is a stacking context with negative stack level, it will be shown under (in z-axis) the background of #container. Then, hovering #main contents is like hovering parent's background.
Therefore, :hover doesn't apply.
html,
body {
height: 100%;
}
body {
margin: 0;
color: #3b3b3b;
font-family: tahoma;
font-size: 12px;
background: #f5f5f5;
}
body.toggle {
overflow: hidden;
}
#main_content {
height: 100%;
}
#preloader_content {
z-index: 99999;
position: absolute;
top: 0;
left: 0;
background: #303030;
width: 100%;
height: 100%;
}
#preloader_content > div {
position: absolute;
width: 200px;
}
#preloader_percentage {
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
font-size: 32px;
font-family: arial;
font-weight: bold;
text-align: center;
}
#container {
padding-top: 80px;
height: 100%;
box-sizing: border-box;
}
#header {
position: fixed;
top: 0;
z-index: 1;
height: 80px;
min-width: 600px;
width: 100%;
box-sizing: border-box;
}
#header_mobile {
height: 100%;
display: none;
box-sizing: border-box;
background: #303030;
color: #d9d9d9;
}
#header_desktop {
height: 100%;
margin-left: 200px;
box-sizing: border-box;
background: #fff;
}
#sidebar {
position: fixed;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
width: 200px;
background: #303030;
color: #d9d9d9;
box-sizing: border-box;
}
#sidebar.toggle {
z-index: 0;
display: block;
}
#logo {
position: absolute;
}
#menu {
position: absolute;
top: 80px;
width: 100%;
bottom: 0;
overflow-y: auto;
}
#main {
position: absolute;
min-width: 600px;
width: 100%;
max-width: 1400px;
padding-left: 200px;
box-sizing: border-box;
}
.mobile_header_actions {
float: right;
}
.mobile_header_actions > div {
display: inline-block;
margin-right: 20px;
}
.btn_mobile_header_toggle {
background: url(/gfx/btn.mobile_header_toggle.png) no-repeat center;
cursor: pointer;
height: 50px;
width: 50px;
}
.btn_mobile_header_toggle.toggle {
background-color: rgba(0, 0, 0, 0.5);
}
.sidebar_page_ul,
.sidebar_subpage_ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
.sidebar_section {
padding: 10px 10px 10px 20px;
font-size: 11px;
color: #c2c2c2;
}
.sidebar_page {
padding: 10px 10px 10px 30px;
font-size: 13px;
font-weight: bold;
transition: background-color 0.2s ease 0s;
cursor: pointer;
}
.sidebar_arrow {
background: url(/gfx/sidebar_arrow.png) no-repeat center;
float: right;
height: 18px;
width: 18px;
}
.sidebar_arrow.active {
transform: rotate(90deg);
}
.sidebar_subpage_ul {
display: none;
}
.sidebar_subpage_ul.active {
display: block;
}
.sidebar_subpage {
padding: 10px 10px 10px 30px;
background-color: rgba(0, 0, 0, 0.35);
font-size: 13px;
transition: background-color 0.2s ease 0s;
cursor: pointer;
opacity: 0;
}
.sidebar_page.active,
.sidebar_page:hover,
.sidebar_subpage.active,
.sidebar_subpage:hover {
background-color: rgba(0, 0, 0, 0.2);
color: #fff;
}
#media (max-width: 767px) {
#container {
padding-top: 50px;
}
#header {
height: 50px;
}
#header_mobile {
display: block;
}
#header_desktop {
display: none;
}
#sidebar {
display: none;
}
#menu {
top: 50px;
}
#main {
padding-left: 0;
}
}
#media (min-width: 768px) {
#sidebar {
width: 200px !important;
}
#main {
left: 0 !important;
}
}
#media (min-width: 992px) {}#media (min-width: 1200px) {} button {
background:linear-gradient(#f5f5f5,
#f1f1f1);
border:1px solid rgba(0,
0,
0,
0.1);
box-sizing:content-box;
border-radius:2px;
display:inline-block;
min-width:50px;
color:#444;
font-size:11px;
font-weight:bold;
padding:4px 8px 5px 8px;
text-align:center;
transition:all 300ms ease 0s;
margin:0 6px 0 0;
cursor:pointer;
}
button:hover {
background: linear-gradient(#f8f8f8, #f1f1f1);
border-color: #c6c6c6;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
color: #222;
}
button.cta {
background: linear-gradient(#4d90fe, #4787ed);
border: 1px solid #3079ed;
color: #fff;
}
button.cta:hover {
background: linear-gradient(#4d90fe, #357ae8);
border-color: #2f5bb7;
}
<div id="main_content">
<div id="container">
<div id="header">
<div id="header_mobile">Header Mobile
<button class="cta" id="e1">Log off</button>
<div class="mobile_header_actions">
<div class="btn_mobile_header_toggle" id="e3"></div>
</div>
</div>
<div id="header_desktop">Header Desktop
<button class="cta" id="e2">Log off</button>
</div>
</div>
<div id="sidebar">
<div id="logo">Logo</div>
<div id="menu">
<div id="e0">
<ul class="sidebar_page_ul">
<li>
<div class="sidebar_section">Accounts</div>
</li>
<li>
<div class="sidebar_page" id="e4">Overview</div>
</li>
<li>
<div class="sidebar_page" id="e5">Bookkeeping
<div class="sidebar_arrow"></div>
</div>
<ul class="sidebar_subpage_ul" id="e6">
<li>
<div class="sidebar_subpage" id="e7">Bilag</div>
</li>
<li>
<div class="sidebar_subpage" id="e8">Daglig</div>
</li>
</ul>
</li>
<li>
<div class="sidebar_page active" id="e9">
Chart of accounts
</div>
</li>
<li>
<div class="sidebar_section">Administration</div>
</li>
<li>
<div class="sidebar_page" id="e10">Client</div>
</li>
<li>
<div class="sidebar_page" id="e11">Accounts</div>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<div style="padding:20px">
account
<button>Test</button>
<button class="cta">Test</button>
</div>
</div>
</div>
</div>

very simple.
just change the width of sidebar and you'll see it is working fine.
actually sidebar is overlapping on your main div.
check this below
http://oi61.tinypic.com/20j0182.jpg

Categories