Sample Image How to put Icon for image At the end with Css and HTMl5.
Please help me in this , Thanks in advance
Here I am getting outside of the image But I have to get at the right side corner with clickable
.container img {
max-width:5%;
max-height:5%
}
.positioner {
position: absolute;
}
.icon {
position: absolute;
right: -70px;
bottom: -20px;
width: 32px;
height: 32px;
border-radius: 20px;
border: 4px solid white;
background: rgb(0, 195, 255);
}
<div class="container" style="margin-bottom: 10px;">
<img src="https://www.bpimaging.com/assets/uploads/2015/02/business-portrait-photography-man.jpg" style="width: 56px;max-height: 56px;clip-path: circle(22px at center);"
class="mr-3 d-none d-sm-block" alt="..." i class="fa fa-pencil fa-lg" style="color:white">
<div class="positioner">
<div class="icon">
<i class="fa fa-pencil fa-lg" style="color:white"></i>
</div>
</div>
<div>
[Sample Image for your reference]
[1]: https://i.stack.imgur.com/cYzfh.png
<html>
<head>
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
</style>
</head>
<body>
<div class="container">
<img src="rose-817431_960_720.jpg" alt="Snow" style="width:100%;">
<img src="flat-blue-home-icon-4.png" class="bottom-right" id='icon'>
</div>
<script>
document.getElementById('icon').addEventListener('click',() => {
alert("CLICKED ON ICON");
});
</script>
</body>
check below code
.container {
margin-bottom: 10px;
}
.icon {
position: absolute;
bottom: 5px;
right: 0px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgb(0, 195, 255);
}
.profile-pic {
position: relative;
width: 56px;
float: left;
}
.profile-desc {
margin-left: 56px;
height: 60px;
/* padding: 10px; */
}
.profile-desc p {
margin: 0;
padding: 15px 10px 10px;
}
<div class="container" style="/* margin-bottom: 10px; */">
<div class="profile-pic">
<img src="https://www.bpimaging.com/assets/uploads/2015/02/business-portrait-photography-man.jpg" style="width: 56px;max-height: 56px;clip-path: circle(22px at center);" class="mr-3 d-none d-sm-block" alt="..." i="">
<div class="icon">
<i class="fa fa-pencil fa-lg" style="color:white"></i>
</div>
</div>
<div class="profile-desc">
<p>dsds</p>
</div>
<div>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: ""
}], "*")
}
</script>
</div></div>
Related
I have a div and a lot of tags in it, but when I zoom the div in or out it disperses. If you look at the images when I zoom News it doesn't disperse but when I do the same thing to Log it does. The tags that are in the div I want to make them all in one.
.Panels {
margin-top: 100px;
margin-bottom: 120px;
margin-left: 200px;
margin-right: 200px;
position: relative;
.News {
zoom: 0.5;
#pnl1 {
width: 700px;
float: left;
}
#header {
left: 14px;
top: -10px;
position: absolute;
}
#bell {
cursor: pointer;
top: -6px;
left: 630px;
position: absolute;
}
#eye {
cursor: pointer;
top: -6px;
left: 590px;
position: absolute;
}
#heart {
cursor: pointer;
top: -6px;
left: 550px;
position: absolute;
}
}
.Log {
zoom: 0.5;
#pnl2 {
width: 360px;
float: right;
}
#header2 {
top: -10px;
left: 795px;
position: absolute;
}
#content {
top: 60px;
left: 860px;
position: absolute;
}
}
}
<body>
</section>
<div class="Panels">
<div id="div" class="News">
<i id="bell" style="font-size: 1.3rem" class="far fa-bell"></i>
<i id="eye" style="font-size: 1.3rem" class="far fa-eye"></i>
<i id="heart" style="font-size: 1.3rem" class="far fa-heart"></i>
<div id="header" style="font-size: 20px">-News-</div>
<img src="Media/NewsPanel.svg" id="pnl1" />
</div>
<div id="div" class="Log">
<div id="header2" style="font-size: 20px">-Update Log-</div>
<p style="text-align: center" id="content">Website Released!</p>
<img src="Media/LogPanel.svg" id="pnl2" />
</div>
</div>
<section>
</body>
I am creating a website and right now I am stuck.
As of now I am creating the dashboard of the website.
It has a header for the basic settings (Home, Profile and Log out) buttons.
Body which contains the navigation tools on the left and at the main body page which is located beside it.
And of course the footer below it.
It should look like this:
It fine like that but some how when I view it in using the "toggle device toolbar" under the devtools, it look like this:
How can I solve this overshoot.
Here is the code:
body,
html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 81px;
}
.leftForm {
background-color: #2c384a;
width: 204px;
float: left;
height: 100%;
}
.leftForm img,
.leftForm1 img {
width: 204px;
height: 204px;
border-radius: 200px;
}
.name {
font-size: 26px;
font-family: calibri;
color: white;
margin: 0;
text-align: center;
}
.pageselector li,
.pageselector1 li {
width: 150px;
padding: 10px 0 10px 10px;
text-align: left;
}
.pageselector a,
.pageselector1 a,
.fa-facebook,
.fa-twitter {
color: white;
}
.pageselector li:hover,
.active,
.pageselector1 li:hover,
.active1 {
background-color: rgba(0, 0, 0, 0.7);
}
.contentcon {
width: auto;
display: inline-block;
}
.announcementSlider {
background-color: #323f4f;
border-radius: 10px 10px 3px 3px;
font-size: 24px;
margin: 5px 3px 3px 3px;
height: 400px;
width: 630px;
border: 2px solid black;
color: white;
}
.annocontent {
color: black;
height: 360px;
width: 626px;
border-radius: 0 0 3px 3px;
background: #f1f1f1;
}
.buttons-container {
border-radius: 10px 10px 0 0;
width: 640px;
}
.button {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 153px;
background: #4091e3;
float: left;
color: white;
}
.button-admin {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 312px;
background: #4091e3;
float: left;
color: white;
}
.button img,
.button-admin img {
height: 60px;
margin: 14px 0;
}
#media screen and (max-width: 980px) {
.buttons-container {
width: auto;
height: auto;
}
.announcementSlider {
width: auto;
}
.contentcon {
padding-left: 0;
}
.annocontent {
width: auto;
}
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 81px;
background-color: gray;
text-align: center;
}
.fa {
margin: 15px 0;
padding: 11px;
width: 50px;
height: 50px;
text-decoration: none;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
}
.fa-twitter {
background: #55ACEE;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div id="page-container">
<div id="content-wrap">
<header id="header">
<nav style="background: #2196F3; font-size: 2.1rem; padding: 0 15px;">
Dashboard
<i class="material-icons">menu</i>
<ul class="hide-on-med-and-down right">
<li>Home</li>
<li>Profile</li>
<li>Log Out</li>
</ul>
</nav>
</header>
<div style="text-align: center;">
<div class="leftForm hide-on-med-and-down">
<?php echo '<img src="picture.php?id=' . $user_check . '">';?>
<p class="name">Administrator</p>
<ul class="pageselector right">
<a href="Dashboard.php">
<li class="active">Dashboard</li>
</a>
<a href="profile.php">
<li>Profile</li>
</a>
<a href="">
<li>Subject</li>
</a>
<a href="">
<li>Workspace</li>
</a>
<a href="">
<li>Task</li>
</a>
<a href="">
<li>Messages</li>
</a>
<a href="logout.php">
<li>Log Out</li>
</a>
</ul>
</div>
<div class="leftForm1 sidenav" id="slide_out" style="width: auto;background-color: #2c384a;">
<?php echo '<img src="picture.php?id=' . $user_check . '">';?>
<p class="name">Administrator</p>
<ul class="pageselector1 right">
<a href="Dashboard.php">
<li class="active1">Dashboard</li>
</a>
<a href="profile.php">
<li>Profile</li>
</a>
<a href="">
<li>Subject</li>
</a>
<a href="">
<li>Workspace</li>
</a>
<a href="">
<li>Task</li>
</a>
<a href="">
<li>Messages</li>
</a>
<a href="logout.php">
<li>Log Out</li>
</a>
</ul>
</div>
<div class="contentcon">
<div class="announcementSlider">
Announcements
<div class="annocontent"></div>
</div>
<div class="buttons-container">
<a class="button" href=".php">
<div>
<img src='pictures/Library.png'>
<div class="span"><span>Library</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/Workspace.png'>
<div class="span"><span>Workspace</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/task.png'>
<div class="span"><span>Task</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/message.png'>
<div class="span"><span>Message</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/locker.png'>
<div class="span"><span>Locker</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/teacher.png'>
<div class="span"><span>Teachers</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/student.png'>
<div class="span"><span>Students</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/calendar.png'>
<div class="span"><span>Calendar</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/blogforum.png'>
<div class="span"><span>Blog/Forum</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/grades.png'>
<div class="span"><span>Grades</span></div>
</div>
</a>
<a class="button-admin" href=".php">
<div>
<img src='pictures/admin.png'>
<div class="span"><span>Admin</span></div>
</div>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
const slide_menu = document.querySelectorAll(".sidenav");
M.Sidenav.init(slide_menu, {});
</script>
</div>
</div>
<footer id="footer">
</footer>
</div>
this is a problem that can be solved in many ways, the best way to solve footer issues (and header) in my opinion is following this trick: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
solution:
set a fixed height of your footer{ height: 10px} and set body{ margin-bottom: 10px}
UPDATE BASED ON COMMENTS
I am not able to see if this works as i cannot recreate the code in my environment.
CSS
body,
html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
body {
margin-bottom: 81px;
position: relative;
}
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 81px;
}
.leftForm {
background-color: #2c384a;
width: 204px;
float: left;
height: 100%;
}
.leftForm img,
.leftForm1 img {
width: 204px;
height: 204px;
border-radius: 200px;
}
.name {
font-size: 26px;
font-family: calibri;
color: white;
margin: 0;
text-align: center;
}
.pageselector li,
.pageselector1 li {
width: 150px;
padding: 10px 0 10px 10px;
text-align: left;
}
.pageselector a,
.pageselector1 a,
.fa-facebook,
.fa-twitter {
color: white;
}
.pageselector li:hover,
.active,
.pageselector1 li:hover,
.active1 {
background-color: rgba(0, 0, 0, 0.7);
}
.contentcon {
width: auto;
display: inline-block;
}
.announcementSlider {
background-color: #323f4f;
border-radius: 10px 10px 3px 3px;
font-size: 24px;
margin: 5px 3px 3px 3px;
height: 400px;
width: 630px;
border: 2px solid black;
color: white;
}
.annocontent {
color: black;
height: 360px;
width: 626px;
border-radius: 0 0 3px 3px;
background: #f1f1f1;
}
.buttons-container {
border-radius: 10px 10px 0 0;
width: 640px;
}
.button {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 153px;
background: #4091e3;
float: left;
color: white;
}
.button-admin {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 312px;
background: #4091e3;
float: left;
color: white;
}
.button img,
.button-admin img {
height: 60px;
margin: 14px 0;
}
#media screen and (max-width: 980px) {
.buttons-container {
width: auto;
height: auto;
}
.announcementSlider {
width: auto;
}
.contentcon {
padding-left: 0;
}
.annocontent {
width: auto;
}
}
#footer {
position: relative;
bottom: 0;
width: 100%;
height: 81px;
background-color: gray;
text-align: center;
}
.fa {
margin: 15px 0;
padding: 11px;
width: 50px;
height: 50px;
text-decoration: none;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
}
.fa-twitter {
background: #55ACEE;
}
}
Another possibily solution (I change php tag for this example, snippet seems not to work, maybe wv and wh doesn't work there, but it does if you try directly saving as html file, or try it here)
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body,
html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#page-container {
position: relative;
min-height: calc(100% - 64px);
display: flex;
}
#content-wrap {
padding-bottom: 81px;
}
.leftForm {
background-color: #2c384a;
width: 204px;
float: left;
height: 100%;
}
.leftForm img,
.leftForm1 img {
width: 204px;
height: 204px;
border-radius: 200px;
}
.name {
font-size: 26px;
font-family: calibri;
color: white;
margin: 0;
text-align: center;
}
.pageselector li,
.pageselector1 li {
width: 150px;
padding: 10px 0 10px 10px;
text-align: left;
}
.pageselector a,
.pageselector1 a,
.fa-facebook,
.fa-twitter {
color: white;
}
.pageselector li:hover,
.active,
.pageselector1 li:hover,
.active1 {
background-color: rgba(0, 0, 0, 0.7);
}
.contentcon {
width: auto;
display: inline-block;
}
.announcementSlider {
background-color: #323f4f;
border-radius: 10px 10px 3px 3px;
font-size: 24px;
margin: 5px 3px 3px 3px;
height: 400px;
width: 630px;
border: 2px solid black;
color: white;
}
.annocontent {
color: black;
height: 360px;
width: 626px;
border-radius: 0 0 3px 3px;
background: #f1f1f1;
}
.buttons-container {
border-radius: 10px 10px 0 0;
width: 640px;
}
.button {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 153px;
background: #4091e3;
float: left;
color: white;
}
.button-admin {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 312px;
background: #4091e3;
float: left;
color: white;
}
.button img,
.button-admin img {
height: 60px;
margin: 14px 0;
}
#media screen and (max-width: 980px) {
.buttons-container {
width: auto;
height: auto;
}
.announcementSlider {
width: auto;
}
.contentcon {
padding-left: 0;
}
.annocontent {
width: auto;
}
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 81px;
background-color: gray;
text-align: center;
}
.fa {
margin: 15px 0;
padding: 11px;
width: 50px;
height: 50px;
text-decoration: none;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
}
.fa-twitter {
background: #55ACEE;
}
}
</style>
</head>
<body>
<header id="header">
<nav style="background: #2196F3; font-size: 2.1rem; padding: 0 15px;">
Dashboard
<i class="material-icons">menu</i>
<ul class="hide-on-med-and-down right">
<li>Home</li>
<li>Profile</li>
<li>Log Out</li>
</ul>
</nav>
</header>
<div id="page-container">
<div id="content-wrap">
<div style="text-align: center; width: 100vw;">
<div class="leftForm hide-on-med-and-down">
<img src="picture.php?id=">
<p class="name">Administrator</p>
<ul class="pageselector right">
<a href="Dashboard.php">
<li class="active">Dashboard</li>
</a>
<a href="profile.php">
<li>Profile</li>
</a>
<a href="">
<li>Subject</li>
</a>
<a href="">
<li>Workspace</li>
</a>
<a href="">
<li>Task</li>
</a>
<a href="">
<li>Messages</li>
</a>
<a href="logout.php">
<li>Log Out</li>
</a>
</ul>
</div>
<div class="leftForm1 sidenav" id="slide_out" style="width: auto;background-color: #2c384a;">
<img src="picture.php?id=">
<p class="name">Administrator</p>
<ul class="pageselector1 right">
<a href="Dashboard.php">
<li class="active1">Dashboard</li>
</a>
<a href="profile.php">
<li>Profile</li>
</a>
<a href="">
<li>Subject</li>
</a>
<a href="">
<li>Workspace</li>
</a>
<a href="">
<li>Task</li>
</a>
<a href="">
<li>Messages</li>
</a>
<a href="logout.php">
<li>Log Out</li>
</a>
</ul>
</div>
<div class="contentcon">
<div class="announcementSlider">
Announcements
<div class="annocontent"></div>
</div>
<div class="buttons-container">
<a class="button" href=".php">
<div>
<img src='pictures/Library.png'>
<div class="span"><span>Library</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/Workspace.png'>
<div class="span"><span>Workspace</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/task.png'>
<div class="span"><span>Task</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/message.png'>
<div class="span"><span>Message</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/locker.png'>
<div class="span"><span>Locker</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/teacher.png'>
<div class="span"><span>Teachers</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/student.png'>
<div class="span"><span>Students</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/calendar.png'>
<div class="span"><span>Calendar</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/blogforum.png'>
<div class="span"><span>Blog/Forum</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/grades.png'>
<div class="span"><span>Grades</span></div>
</div>
</a>
<a class="button-admin" href=".php">
<div>
<img src='pictures/admin.png'>
<div class="span"><span>Admin</span></div>
</div>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
const slide_menu = document.querySelectorAll(".sidenav");
M.Sidenav.init(slide_menu, {});
</script>
</div>
</div>
<footer id="footer">
</footer>
</div>
</body>
.circle{
padding:20px !important;
}
h2{
margin:unset;
}
.circle-text {
display: block;
margin: auto;
height: 120px;
width: 120px;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: #FF9800 ;
color: #fff;
font: 18px "josefin sans", arial;
line-height: 120px;
}
.a {
display: inline-block;
position: relative;
}
.a:before,
.a:after {
content: "";
position: absolute;
height: 60px;
border-bottom: 5px solid black;
top:0;
width: 293px;
}
.a:before {
right: 100%;
margin-right: 0px;
}
.a:after {
left: 100%;
margin-left:0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
<div class="uk-section-align uk-margin-xlarge-top">
<div class="uk-container">
<div class="uk-text-center" uk-grid>
<div class="uk-width-1-3 circle">
<div class="circle-text ">
<i class="medium material-icons">Step 1</i>
</div>
<p class="center-align uk-margin-top">Choose Your Trip</p>
</div>
<div class="uk-width-1-3 ">
<div class="circle-text a">
<i class="medium material-icons">Step 2</i>
</div>
<p class="center-align uk-margin-top ">Request for reservation</p>
</div>
<div class="uk-width-1-3">
<div class="circle-text ">
<i class="medium material-icons">Step 3</i>
</div>
<p class="center-align uk-margin-top">Successfully</p>
</div>
</div>
</div>
</div>
I want to make responsive progress bar using pure css and uikit 3. This code i was written it works when it show in desktop mode . when i switching desktop mode to mobile mode , middle black line strike both circle. i just want to when it show in mobile mode also it only touch the circle.
please give some suggestion.
Try this
.circle{
padding:20px !important;
}
h2{
margin:unset;
}
.circle-text {
display: block;
margin: auto;
height: 120px;
width: 120px;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: #FF9800 ;
color: #fff;
font: 18px "josefin sans", arial;
line-height: 120px;
}
.a {
display: inline-block;
position: relative;
}
/*
.a:before,
.a:after {
content: "";
position: absolute;
height: 60px;
border-bottom: 5px solid black;
top:0;
width: 293px;
}
.a:before {
right: 100%;
margin-right: 0px;
}
.a:after {
left: 100%;
margin-left:0px;
}
*/
.uk-process-step {
position: relative;
}
.uk-process-step:before {
top: 60px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 5px;
background-color: black;
}
.uk-process-step .uk-width-1-3 {
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
<div class="uk-section-align uk-margin-xlarge-top">
<div class="uk-container">
<div class="uk-text-center uk-process-step" uk-grid>
<div class="uk-width-1-3 circle">
<div class="circle-text ">
<i class="medium material-icons">Step 1</i>
</div>
<p class="center-align uk-margin-top">Choose Your Trip</p>
</div>
<div class="uk-width-1-3 ">
<div class="circle-text a">
<i class="medium material-icons">Step 2</i>
</div>
<p class="center-align uk-margin-top ">Request for reservation</p>
</div>
<div class="uk-width-1-3">
<div class="circle-text ">
<i class="medium material-icons">Step 3</i>
</div>
<p class="center-align uk-margin-top">Successfully</p>
</div>
</div>
</div>
</div>
Use z-index for the pseudo elements (the black line).
Set it to -1 so that it will go beyond the circle.
Try this
.circle{
padding:20px !important;
}
h2{
margin:unset;
}
.circle-text {
display: block;
margin: auto;
height: 120px;
width: 120px;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: #FF9800 ;
color: #fff;
font: 18px "josefin sans", arial;
line-height: 120px;
}
.a {
display: inline-block;
position: relative;
}
.a:before,
.a:after {
content: "";
position: absolute;
height: 60px;
border-bottom: 5px solid black;
top:0;
width: 293px;
}
.a:before {
right: 100%;
margin-right: 0px;
z-index: -1;
}
.a:after {
left: 100%;
margin-left:0px;
z-index:-1
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
<div class="uk-section-align uk-margin-xlarge-top">
<div class="uk-container">
<div class="uk-text-center" uk-grid>
<div class="uk-width-1-3 circle">
<div class="circle-text ">
<i class="medium material-icons">Step 1</i>
</div>
<p class="center-align uk-margin-top">Choose Your Trip</p>
</div>
<div class="uk-width-1-3 ">
<div class="circle-text a">
<i class="medium material-icons">Step 2</i>
</div>
<p class="center-align uk-margin-top ">Request for reservation</p>
</div>
<div class="uk-width-1-3">
<div class="circle-text ">
<i class="medium material-icons">Step 3</i>
</div>
<p class="center-align uk-margin-top">Successfully</p>
</div>
</div>
</div>
</div>
I have recent-posts div that show two post with their images and text. after recent-posts I have another div contact-us that contain an image and some text. My issue appear in extra-small size where recent-posts posts go under contact-us part. How can I fix that? The following is my codes and JsFiddle.
HTML:
<div id="recent-posts" class="center-block row">
<div class="posts col-md-3 col-sm-5 col-xs-9">
<div class="posts-div">
<div class="img-hover">
<img src="images/post1.jpg" class="img-responsive">
<div class="overlay col-md-12 col-xs-12">
<div>
<span class="fa fa-2x fa-square post-icon" ><span class="fa fa-heart"></span></span>
<span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
</div>
<div>
<span class="fa fa-2x fa-square post-icon" ><span class="fa fa-eye"></span></span>
<span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
</div>
</div>
</div>
<p class="text-center">dsfdsfsdfldshfdskfhdsf</div>
</div>
<div class="posts col-md-3 col-sm-5 col-xs-9">
<div class="posts-div">
<div class="img-hover">
<img src="images/post2.jpg" class="img-responsive">
<div class="overlay col-md-12 col-xs-12">
<div>
<span class="fa fa-2x fa-square post-icon" ><span class="fa fa-heart "></span></span>
<span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
</div>
<div>
<span class="fa fa-2x fa-square post-icon" ><span class="fa fa-eye "></span></span>
<span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
</div>
</div>
</div>
<p class="text-center">dsjkfhjdssafjsdkjhfdsf</p>
</div>
</div>
</div>
<div id="contact-us" class="row">
<div class="col-md-12 col-xs-12">
<img src="http://www.infocurse.com/wp-content/uploads/2014/11/716988156_1368083660.png" class="img-responsive">
<div id="contact-us-text">
<p>sdkf,sd,kfnds,nf,d.....</p>
<p>kdsfnks,dnf,ksdnf,kdsnf,kdsnf,d</p>
<button class="btn btn-success pull-left">124234234</button>
</div>
</div>
</div>
Css:
#recent-posts{
height: 350px;
display: flex;
justify-content: center;
position: relative;
flex-wrap: wrap;
margin-bottom: 100px;
}
.posts{
display: flex;
flex-direction: column;
height: 350px;
margin-top: 20px;
position: relative;
border-radius: 5px;
box-shadow: 1px 1px 5px #888888;
padding: 0;
margin-left: 20px;
margin-right: 20px;
}
.posts img{
border-radius: 5px 5px 0 0;
cursor: pointer;
}
.posts .btn-success{
position: absolute;
background-color: #01a89e;
width: 50%;
color: #101010;
cursor: auto;
margin-top: -17px;
margin-right: 25%;
}
.posts .btn-success:active{
background-color: #01a89e;
color: #101010;
box-shadow: none;
}
.posts p{
margin-top: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.overlay {
position: absolute;
top: 0;
bottom: 100%;
left: 0;
right: 0;
background-color: rgba(46, 183, 175, .7);
overflow: hidden;
height:0;
transition: .8s ease;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 5px 5px 0 0;
}
.overlay div:first-child{
margin-left: 15px;
}
.posts-div:hover .overlay {
bottom: 0;
top: 0;
height: auto;
overflow: hidden;
}
.img-hover{
position: relative;
}
.post-icon{
color: rgba(255, 255, 255, 1);
transform: rotate(45deg);
opacity: 1;
}
.post-icon span{
transform: rotate(-45deg);
font-size: 12px;
position: absolute;
left: 50%;
top: 0.6em;
margin-left: -7px;
color: #101010;
font-weight: bold;
}
.fa-heart{
color: red !important;
}
#contact-us{
height: 200px;
margin-bottom: 30px;
box-shadow: 0 1px 5px #666666, 0 -1px 5px #666666;
position: relative;
padding: 0;
overflow: hidden;
}
#contact-us-text{
position: absolute;
top: 20%;
left: 12%;
}
#contact-us-text p{
color: white;
}
#contact-us-text .btn-success{
background-color: #01a89e;
cursor: auto;
}
#contact-us-text .btn-success:active{
background-color: #01a89e;
box-shadow: none;
}
JsFiddle
Recent-posts class has a fixed height.
#recent-posts{
height: 350px; // THIS LINE IS THE REASON!
display: flex;
justify-content: center;
position: relative;
flex-wrap: wrap;
margin-bottom: 100px;
}
Updated fiddle
So I have an interface where I want a sidemenu to the left, and the rest of the area should contain a chat-field. The problem is that the chat-field is overflowing the container, and half of the chat-field goes outside the container div.
How do I fit the chat-field in the container with these settings? The container is named #chat-canvas
Here's a JSFiddle: https://jsfiddle.net/v5k1Lhgf/1/
* {
margin: 0;
padding: 0;
box-sizing: border-box !important;
}
html, body, #body {
background-color: #ffffff;
font-size: 15px;
color: #565656;
width: 100%;
padding: 0;
margin-left: 0;
margin-right: 0;
font-family: 'roboto', sans-serif;
font-weight: 300;
}
#body, .app html, body {
background-color: #f9f9f9;
font-size: 15px;
color: #565656;
width: 100%;
height: 100%;
padding: 0;
margin-left: 0;
margin-right: 0;
font-family: 'roboto', sans-serif;
font-weight: 300;
min-height: 100%;
}
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
transition: all 3s ease-in-out;
height: 100%;
min-height: 100%;
}
*,*:before,*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#chat-canvas {
width: 94% !important;
height: 100%;
position: absolute;
float: left;
display: inline-block;
overflow: hidden;
}
.app-nav {
position: relative;
height: 100%;
width: 6%;
display: inline-block;
}
.tl-menu {
position: absolute;
overflow: hidden;
float: left;
top: 0;
height: 100%;
list-style-type: none;
margin: 0;
padding: 0;
background: #1b1e24;
z-index: 9999;
}
.tl-menu img{
max-height: 80%;
}
.tl-menu li a {
display: block;
height: 5em;
width: 5em;
line-height: 5em;
text-align: center;
color: #999;
position: relative;
border-bottom: 1px solid rgba(104,114,134,0.05);
-webkit-transition: background 0.1s ease-in-out;
-moz-transition: background 0.1s ease-in-out;
transition: background 0.1s ease-in-out;
}
.tl-menu li a:hover,
.tl-menu li:first-child a{
color: #55fec6;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.tl-menu li a:active {
background: #afdefa;
color: #FFF;}
/* class for current item */
.tl-menu li.tl-current a {
background: #343a47;
color: #bbe6fe;
}
.tl-menu li a:before {
font-family: 'entypo', sans-serif;
speak: none;
font-style: normal;
font-weight: normal;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 1.4em;
-webkit-font-smoothing: antialiased;
}
.tl-menu li a.icon-logo:before {
font-weight: 700;
font-size: 300%;
}
/* ---------- CHAT ---------- */
.people-list {
width: 30%;
float: right;
}
.people-list .search {
padding: 20px;
}
.people-list input {
border-radius: 3px;
border: none;
padding: 14px;
color: white;
background: #6A6C75;
width: 90%;
font-size: 14px;
}
.people-list .fa-search {
position: relative;
left: -25px;
}
.people-list ul {
padding: 20px;
height: 770px;
}
.people-list ul li {
padding-bottom: 20px;
}
.people-list img {
float: left;
}
.people-list .about {
float: left;
margin-top: 8px;
}
.people-list .about {
padding-left: 8px;
}
.people-list .status {
color: #92959E;
}
.chat {
width: 70%;
float: left;
position: absolute;
background: #F2F5F8;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
color: #434651;
}
.chat .chat-header {
padding: 20px;
border-bottom: 2px solid white;
}
.chat .chat-header img {
float: left;
}
.chat .chat-header .chat-about {
float: left;
padding-left: 10px;
margin-top: 6px;
}
.chat .chat-header .chat-with {
font-weight: bold;
font-size: 16px;
}
.chat .chat-header .chat-num-messages {
color: #92959E;
}
.chat .chat-header .fa-star {
float: right;
color: #D8DADF;
font-size: 20px;
margin-top: 12px;
}
.chat .chat-history {
padding: 30px 30px 20px;
border-bottom: 2px solid white;
overflow-y: scroll;
height: 575px;
}
.chat .chat-history .message-data {
margin-bottom: 15px;
}
.chat .chat-history .message-data-time {
color: #a8aab1;
padding-left: 6px;
}
.chat .chat-history .message {
color: white;
padding: 18px 20px;
line-height: 26px;
font-size: 16px;
border-radius: 7px;
margin-bottom: 30px;
width: 90%;
position: relative;
}
.chat .chat-history .message:after {
bottom: 100%;
left: 7%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #86BB71;
border-width: 10px;
margin-left: -10px;
}
.chat .chat-history .my-message {
background: #86BB71;
}
.chat .chat-history .other-message {
background: #94C2ED;
}
.chat .chat-history .other-message:after {
border-bottom-color: #94C2ED;
left: 93%;
}
.chat .chat-message {
padding: 30px;
}
.chat .chat-message textarea {
width: 100%;
border: none;
padding: 10px 20px;
font: 14px/22px "Lato", Arial, sans-serif;
margin-bottom: 10px;
border-radius: 5px;
resize: none;
}
.chat .chat-message .fa-file-o, .chat .chat-message .fa-file-image-o {
font-size: 16px;
color: gray;
cursor: pointer;
}
.chat .chat-message button {
float: right;
color: #94C2ED;
font-size: 16px;
text-transform: uppercase;
border: none;
cursor: pointer;
font-weight: bold;
background: #F2F5F8;
}
.chat .chat-message button:hover {
color: #75b1e8;
}
.online, .offline, .me {
margin-right: 3px;
font-size: 10px;
}
.online {
color: #86BB71;
}
.offline {
color: #E38968;
}
.me {
color: #94C2ED;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.float-right {
float: right;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.chat-container {
bottom: 0;
left: 0;
right: 0;
height: auto;
margin: 0 auto;
width: 750px;
background: #444753;
border-radius: 5px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<body class="app">
<!-- NAV -->
<div class="app-nav">
<ul class="tl-menu">
<li><img src="https://i.imgur.com/ngO5Ohx.png" alt="Mendr Logo" height="50" width="50"></li>
<li><img src="{{user.picture}}"></li>
<li><i class="fa fa-plus" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-wechat" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-map" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-search" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-sign-out" style="font-size:30px; margin-top:20px;"></i></li>
</ul>
</div>
<!-- END NAV -->
<!-- CHAT -->
<div id="chat-canvas">
<div class="clearfix chat-container">
<div class="people-list" id="people-list">
<div class="search">
<input type="text" placeholder="search" />
<i class="fa fa-search"></i>
</div>
<ul class="list">
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01.jpg" alt="avatar" />
<div class="about">
<div class="name">Vincent Porter</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_02.jpg" alt="avatar" />
<div class="about">
<div class="name">Aiden Chavez</div>
<div class="status">
<i class="fa fa-circle offline"></i> left 7 mins ago
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_03.jpg" alt="avatar" />
<div class="about">
<div class="name">Mike Thomas</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_04.jpg" alt="avatar" />
<div class="about">
<div class="name">Erica Hughes</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_05.jpg" alt="avatar" />
<div class="about">
<div class="name">Ginger Johnston</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_06.jpg" alt="avatar" />
<div class="about">
<div class="name">Tracy Carpenter</div>
<div class="status">
<i class="fa fa-circle offline"></i> left 30 mins ago
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_07.jpg" alt="avatar" />
<div class="about">
<div class="name">Christian Kelly</div>
<div class="status">
<i class="fa fa-circle offline"></i> left 10 hours ago
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_08.jpg" alt="avatar" />
<div class="about">
<div class="name">Monica Ward</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_09.jpg" alt="avatar" />
<div class="about">
<div class="name">Dean Henry</div>
<div class="status">
<i class="fa fa-circle offline"></i> offline since Oct 28
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_10.jpg" alt="avatar" />
<div class="about">
<div class="name">Peyton Mckinney</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
</ul>
</div>
<div class="activity-info">
<div class="chat">
<div class="chat-header clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01_green.jpg" alt="avatar" />
<div class="chat-about">
<div class="chat-with">Chat with Vincent Porter</div>
<div class="chat-num-messages">already 1 902 messages</div>
</div>
<i class="fa fa-star"></i>
</div> <!-- end chat-header -->
<div class="chat-history">
<ul>
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-time" >10:10 AM, Today</span>
<span class="message-data-name" >Olia</span> <i class="fa fa-circle me"></i>
</div>
<div class="message other-message float-right">
Hi Vincent, how are you? How is the project coming along?
</div>
</li>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
<span class="message-data-time">10:12 AM, Today</span>
</div>
<div class="message my-message">
Are we meeting today? Project has been already finished and I have results to show you.
</div>
</li>
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-time" >10:14 AM, Today</span>
<span class="message-data-name" >Olia</span> <i class="fa fa-circle me"></i>
</div>
<div class="message other-message float-right">
Well I am not sure. The rest of the team is not here yet. Maybe in an hour or so? Have you faced any problems at the last phase of the project?
</div>
</li>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
<span class="message-data-time">10:20 AM, Today</span>
</div>
<div class="message my-message">
Actually everything was fine. I'm very excited to show this to our team.
</div>
</li>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
<span class="message-data-time">10:31 AM, Today</span>
</div>
<i class="fa fa-circle online"></i>
<i class="fa fa-circle online" style="color: #AED2A6"></i>
<i class="fa fa-circle online" style="color:#DAE9DA"></i>
</li>
</ul>
</div> <!-- end chat-history -->
<div class="chat-message clearfix">
<textarea name="message-to-send" id="message-to-send" placeholder ="Type your message" rows="3"></textarea>
<i class="fa fa-file-o"></i>
<i class="fa fa-file-image-o"></i>
<button>Send</button>
</div> <!-- end chat-message -->
</div> <!-- end chat -->
</div>
</div>
</div>
</body>
Please check snippet in full page for a better view
Replacing height: 100% with min-height: 100% in selector #chat-canvas will make your chat-canvas cover its child chat-field
* {
margin: 0;
padding: 0;
box-sizing: border-box !important;
}
html, body, #body {
background-color: #ffffff;
font-size: 15px;
color: #565656;
width: 100%;
padding: 0;
margin-left: 0;
margin-right: 0;
font-family: 'roboto', sans-serif;
font-weight: 300;
}
#body, .app html, body {
background-color: #f9f9f9;
font-size: 15px;
color: #565656;
width: 100%;
height: 100%;
padding: 0;
margin-left: 0;
margin-right: 0;
font-family: 'roboto', sans-serif;
font-weight: 300;
min-height: 100%;
}
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
transition: all 3s ease-in-out;
height: 100%;
min-height: 100%;
}
*,*:before,*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#chat-canvas {
width: 94% !important;
min-height: 100%;
position: absolute;
float: left;
display: inline-block;
overflow: hidden;
}
.app-nav {
position: relative;
height: 100%;
width: 6%;
display: inline-block;
}
.tl-menu {
position: absolute;
overflow: hidden;
float: left;
top: 0;
height: 100%;
list-style-type: none;
margin: 0;
padding: 0;
background: #1b1e24;
z-index: 9999;
}
.tl-menu img{
max-height: 80%;
}
.tl-menu li a {
display: block;
height: 5em;
width: 5em;
line-height: 5em;
text-align: center;
color: #999;
position: relative;
border-bottom: 1px solid rgba(104,114,134,0.05);
-webkit-transition: background 0.1s ease-in-out;
-moz-transition: background 0.1s ease-in-out;
transition: background 0.1s ease-in-out;
}
.tl-menu li a:hover,
.tl-menu li:first-child a{
color: #55fec6;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.tl-menu li a:active {
background: #afdefa;
color: #FFF;}
/* class for current item */
.tl-menu li.tl-current a {
background: #343a47;
color: #bbe6fe;
}
.tl-menu li a:before {
font-family: 'entypo', sans-serif;
speak: none;
font-style: normal;
font-weight: normal;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 1.4em;
-webkit-font-smoothing: antialiased;
}
.tl-menu li a.icon-logo:before {
font-weight: 700;
font-size: 300%;
}
/* ---------- CHAT ---------- */
.people-list {
width: 30%;
float: right;
}
.people-list .search {
padding: 20px;
}
.people-list input {
border-radius: 3px;
border: none;
padding: 14px;
color: white;
background: #6A6C75;
width: 90%;
font-size: 14px;
}
.people-list .fa-search {
position: relative;
left: -25px;
}
.people-list ul {
padding: 20px;
height: 770px;
}
.people-list ul li {
padding-bottom: 20px;
}
.people-list img {
float: left;
}
.people-list .about {
float: left;
margin-top: 8px;
}
.people-list .about {
padding-left: 8px;
}
.people-list .status {
color: #92959E;
}
.chat {
width: 70%;
float: left;
position: absolute;
background: #F2F5F8;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
color: #434651;
}
.chat .chat-header {
padding: 20px;
border-bottom: 2px solid white;
}
.chat .chat-header img {
float: left;
}
.chat .chat-header .chat-about {
float: left;
padding-left: 10px;
margin-top: 6px;
}
.chat .chat-header .chat-with {
font-weight: bold;
font-size: 16px;
}
.chat .chat-header .chat-num-messages {
color: #92959E;
}
.chat .chat-header .fa-star {
float: right;
color: #D8DADF;
font-size: 20px;
margin-top: 12px;
}
.chat .chat-history {
padding: 30px 30px 20px;
border-bottom: 2px solid white;
overflow-y: scroll;
height: 575px;
}
.chat .chat-history .message-data {
margin-bottom: 15px;
}
.chat .chat-history .message-data-time {
color: #a8aab1;
padding-left: 6px;
}
.chat .chat-history .message {
color: white;
padding: 18px 20px;
line-height: 26px;
font-size: 16px;
border-radius: 7px;
margin-bottom: 30px;
width: 90%;
position: relative;
}
.chat .chat-history .message:after {
bottom: 100%;
left: 7%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #86BB71;
border-width: 10px;
margin-left: -10px;
}
.chat .chat-history .my-message {
background: #86BB71;
}
.chat .chat-history .other-message {
background: #94C2ED;
}
.chat .chat-history .other-message:after {
border-bottom-color: #94C2ED;
left: 93%;
}
.chat .chat-message {
padding: 30px;
}
.chat .chat-message textarea {
width: 100%;
border: none;
padding: 10px 20px;
font: 14px/22px "Lato", Arial, sans-serif;
margin-bottom: 10px;
border-radius: 5px;
resize: none;
}
.chat .chat-message .fa-file-o, .chat .chat-message .fa-file-image-o {
font-size: 16px;
color: gray;
cursor: pointer;
}
.chat .chat-message button {
float: right;
color: #94C2ED;
font-size: 16px;
text-transform: uppercase;
border: none;
cursor: pointer;
font-weight: bold;
background: #F2F5F8;
}
.chat .chat-message button:hover {
color: #75b1e8;
}
.online, .offline, .me {
margin-right: 3px;
font-size: 10px;
}
.online {
color: #86BB71;
}
.offline {
color: #E38968;
}
.me {
color: #94C2ED;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.float-right {
float: right;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.chat-container {
bottom: 0;
left: 0;
right: 0;
height: auto;
margin: 0 auto;
width: 750px;
background: #444753;
border-radius: 5px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<body class="app">
<!-- NAV -->
<div class="app-nav">
<ul class="tl-menu">
<li><img src="https://i.imgur.com/ngO5Ohx.png" alt="Mendr Logo" height="50" width="50"></li>
<li><img src="{{user.picture}}"></li>
<li><i class="fa fa-plus" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-wechat" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-map" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-search" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-sign-out" style="font-size:30px; margin-top:20px;"></i></li>
</ul>
</div>
<!-- END NAV -->
<!-- CHAT -->
<div id="chat-canvas">
<div class="clearfix chat-container">
<div class="people-list" id="people-list">
<div class="search">
<input type="text" placeholder="search" />
<i class="fa fa-search"></i>
</div>
<ul class="list">
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01.jpg" alt="avatar" />
<div class="about">
<div class="name">Vincent Porter</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_02.jpg" alt="avatar" />
<div class="about">
<div class="name">Aiden Chavez</div>
<div class="status">
<i class="fa fa-circle offline"></i> left 7 mins ago
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_03.jpg" alt="avatar" />
<div class="about">
<div class="name">Mike Thomas</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_04.jpg" alt="avatar" />
<div class="about">
<div class="name">Erica Hughes</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_05.jpg" alt="avatar" />
<div class="about">
<div class="name">Ginger Johnston</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_06.jpg" alt="avatar" />
<div class="about">
<div class="name">Tracy Carpenter</div>
<div class="status">
<i class="fa fa-circle offline"></i> left 30 mins ago
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_07.jpg" alt="avatar" />
<div class="about">
<div class="name">Christian Kelly</div>
<div class="status">
<i class="fa fa-circle offline"></i> left 10 hours ago
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_08.jpg" alt="avatar" />
<div class="about">
<div class="name">Monica Ward</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_09.jpg" alt="avatar" />
<div class="about">
<div class="name">Dean Henry</div>
<div class="status">
<i class="fa fa-circle offline"></i> offline since Oct 28
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_10.jpg" alt="avatar" />
<div class="about">
<div class="name">Peyton Mckinney</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
</ul>
</div>
<div class="activity-info">
<div class="chat">
<div class="chat-header clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01_green.jpg" alt="avatar" />
<div class="chat-about">
<div class="chat-with">Chat with Vincent Porter</div>
<div class="chat-num-messages">already 1 902 messages</div>
</div>
<i class="fa fa-star"></i>
</div> <!-- end chat-header -->
<div class="chat-history">
<ul>
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-time" >10:10 AM, Today</span>
<span class="message-data-name" >Olia</span> <i class="fa fa-circle me"></i>
</div>
<div class="message other-message float-right">
Hi Vincent, how are you? How is the project coming along?
</div>
</li>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
<span class="message-data-time">10:12 AM, Today</span>
</div>
<div class="message my-message">
Are we meeting today? Project has been already finished and I have results to show you.
</div>
</li>
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-time" >10:14 AM, Today</span>
<span class="message-data-name" >Olia</span> <i class="fa fa-circle me"></i>
</div>
<div class="message other-message float-right">
Well I am not sure. The rest of the team is not here yet. Maybe in an hour or so? Have you faced any problems at the last phase of the project?
</div>
</li>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
<span class="message-data-time">10:20 AM, Today</span>
</div>
<div class="message my-message">
Actually everything was fine. I'm very excited to show this to our team.
</div>
</li>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
<span class="message-data-time">10:31 AM, Today</span>
</div>
<i class="fa fa-circle online"></i>
<i class="fa fa-circle online" style="color: #AED2A6"></i>
<i class="fa fa-circle online" style="color:#DAE9DA"></i>
</li>
</ul>
</div> <!-- end chat-history -->
<div class="chat-message clearfix">
<textarea name="message-to-send" id="message-to-send" placeholder ="Type your message" rows="3"></textarea>
<i class="fa fa-file-o"></i>
<i class="fa fa-file-image-o"></i>
<button>Send</button>
</div> <!-- end chat-message -->
</div> <!-- end chat -->
</div>
</div>
</div>
</body>
You should use calc(%100 - 200px); as a value to the width. Look up calc CSS it will work because I had the same problem.
Here you go: https://www.w3schools.com/cssref/func_calc.asp
I tried to solve your problem. please check https://jsfiddle.net/komal10041992/v5k1Lhgf/4/. I removed overflow property, gave height:auto and width: 100%