I'm new in Frontend development, I'm doing a "resume website".
I have two columns and 2 rows, I'm using grid containers.
As you can see on the screenshot my second column has the same height as the first while I would like it to be "sensitive". (Suppress all that empty space while the second block under it comes closer). Sorry for my English. I will add my code under the screenshot.
Results of my website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript"> (function() { var css = document.createElement('link'); css.href = 'https://use.fontawesome.com/releases/v5.1.0/css/all.css'; css.rel = 'stylesheet'; css.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(css); })(); </script>
<link href="https://fonts.googleapis.com/css?family=Comfortaa:300,400,700&display=swap" rel="stylesheet">
<meta name="description" content="Resume Maria Macarena ">
<meta name="author" content="Pierre ">
<title>Resume Macarena </title>
<link rel="stylesheet" href="../Normalize.css" >
<link rel="stylesheet" type="text/css" href="essai.css">
</head>
<body>
<div class="grid-container">
<aside class="grid-item aside">
<div class="container photo">
<img src="Maca_profil.jpg" alt="profile picture">
<div class="bottom-left">Macarena </div>
</div>
<div class="row">
<ul>
<li><i class="fas fa-suitcase"></i> Lawyer</li>
<li><i class="fas fa-home"></i> Las Condes, Santiago, Chile</li>
<li><i class="fas fa-at"></i> Email: </li>
<li><i class="fas fa-phone-alt"></i> +********</li>
</ul>
<hr>
</div>
<div class="row">
<h2><i class="fas fa-asterisk"></i> Skills</h2>
<ul>
<li>Microsoft Excel
<div class="container progressBar">
<div class="skills excel">80%</div>
</div></li>
<li>Microsoft Word
<div class="container progressBar">
<div class="skills word">100%</div>
</div></li>
<li>Etc..</li>
</ul>
<h2><i class="fas fa-asterisk"></i> Languages</h2>
<ul>
<li>Español
<div class="container progressBar">
<div class="skills spanish">100%</div>
</div></li>
<li>English
<div class="container progressBar">
<div class="skills english">80%</div>
</div></li>
<li>Français
<div class="container progressBar">
<div class="skills french">20%</div>
</div></li>
</ul>
</div>
</aside>
<section class="grid-item item2">
<div class="contenu">
<h2><i class="fas fa-suitcase"></i> WORK EXPERIENCE</h2>
<h3>EY Consulting</h3><p> <i class="far fa-calendar-alt"></i> November 2014 – March 2017</p>
<ul>
<li><span class="souligne">Position</span>: Senior lawyer at the Santiago business tax advisory group.</li>
<li><span class="souligne">Relevant duties</span>: compilation, study and processing of relevant information on the specific business line of the client. Research and draft memorandums concerning the design of efficient tax structures for multinational clients. Involved in complex repatriation cases before Chilean Tax Authorities. Planning and implementation of corporate restructuring.</li>
</ul>
<hr>
<h3>Chilean Judicial Assistance Corporation</h3>
<p><i class="far fa-calendar-alt"></i> November 2013 – May 2014</p>
<ul>
<li><span class="souligne">Position</span>: Compulsory Government Internship</li>
<li><span class="souligne">Relevant duties</span>: disposal of judicial and extrajudicial civil cases</li>
</ul>
<hr>
<h3>Bordachar, Alvear, Meneses, Montes y Cía.</h3>
<p><i class="far fa-calendar-alt"></i> March 2012 – August 2012</p>
<ul>
<li><span class="souligne">Position</span>: Corporate Law Clerk</li>
<li><span class="souligne">Relevant duties</span>: legal services to Chilean and foreign clients undertaking business in Chile.</li>
</ul>
</div>
</section>
<div class="grid-item item3">
<h2><i class="fas fa-graduation-cap"></i> ACADEMIC BACKGROUND</h2>
<ul>
<li><h5>Pontifical Catholic University of Chile</h5>
<h6><i class="far fa-calendar-alt"></i> 2015 </h6>
<p>Advanced diploma “Litigation and New Procedures”</p> </li><hr>
<li><h5>Arbitration Academy (Paris, France)</h5>
<h6><i class="far fa-calendar-alt"></i> 2012 </h6>
<p>Diploma "International Academy for Arbitration Law"</p><hr></li>
<li><h5>Catholic University of Chile</h5>
<h6><i class="far fa-calendar-alt"></i> 2008 – 2012</h6><p>Bachelor of Laws, Pontifical</p> <hr></li>
<li><h5>High and Elementary School, Sagrado Corazón de Apoquindo</h5>
<h6><i class="far fa-calendar-alt"></i> 1998 – 2007</h6></li>
</ul>
</div>
</div>
<footer class="container footer">
<div class="row">
</div>
</footer>
</body>
* {
box-sizing: border-box;
font-family: 'Comfortaa', cursive;
}
#media only screen and (max-width: 768px) {
}
.grid-container {
padding: 10px;
background-color: darkgrey;
}
/* ASIDE */
.aside {
margin: 10px 10px 0px 20px;
background-color: #E0E2E3;
opacity: .9;
height: auto;
border-radius: 5px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.photo {
width: 100%;
position: relative;
text-align: center;
color: #282828;
}
img {
width: 100%;
height: auto;
}
/* Bottom left text */
.bottom-left {
position: absolute;
bottom: 8px;
left: 10px;
font-weight: 600;
font-size: 30px;
}
ul {
list-style-type: none;
margin: 15px;
padding: 0px;
line-height: 25px;
padding-bottom: auto;
}
i {
color: #1689AC;
}
/* BODY */
.aside, .item2, .item3 {
padding-bottom: 5px;
}
h2, h3 {
margin-left: 15px;
}
h2 {
padding-top: 15px;
padding-bottom: 15px;
font-weight: 700;
}
p {
margin-top: -15px;
padding-left: 15px;
font-weight: 500;
}
.item2 {
background-color: #E0E2E3;
opacity: .9;
margin: 10px 10px 0px 20px;
height: auto;
border-radius: 5px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.item3 {
grid-column-start: 2;
background-color: #E0E2E3;
opacity: .9;
margin: 10px 10px 0px 20px;
height: auto;
border-radius: 5px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.item3 h5, h6, p {
line-height: 20px;
}
.item3 h5 {
font-size: 1em;
display: inline;
}
.item3 h6 {
font-weight: 500;
margin-top: 5px;
font-size: .9em;
padding: 0px 0px 0px 15px;
margin-bottom: 10px;;
}
.item3 p {
margin-top: auto;
font-weight: 100;
}
/* PROGRESS BARS */
.progressBar {
width: 100%;
height: 20px;
background-color: #9DA3A4;
border-radius: 20px;
}
.skills {
height: inherit;
text-align: right;
padding-right: 5px;
font-size: .7em;
color: white;
border-radius: 20px;
}
.excel {width: 80%; background-color: #1689AC;}
.word {width: 100%;background-color: #1689AC;}
.spanish {width: 100%; background-color: #1689AC;}
.english {width: 80%; background-color: #1689AC;}
.french {width: 20%; background-color: #1689AC;}
/* FOOTER */
.footer {
display: flex;
flex-direction: column;
height: 100px;
text-align: center;
background-color: ;
}
#media only screen and (min-width: 768px) {
.grid-container {
display: grid;
grid-template-columns: 35% 65% ;
}
.item2, .item3 {
margin: 10px 10px 0px 5px;
}
}
Just put your "items" inside one grid container.
<section class="grid-item">
<div class="item2">...WORK EXPERIENCE</div>
<div class="item3">...ACADEMIC BACKGROUND</div>
</section>
https://jsfiddle.net/zq1g7nh6/
You need to define 2 columns in a row and in the second column, there should be mulitiple rows. for example (basic structure):
<div class='row'>
<div class="col"> some content </div>
<div class="col">
<div class="row"> some content</div>
<div class="row"> some content</div>
</div>
</div>
* {
box-sizing: border-box;
font-family: 'Comfortaa', cursive;
}
#media only screen and (max-width: 768px) {
}
.grid-container {
padding: 10px;
background-color: darkgrey;
}
/* ASIDE */
.aside {
margin: 10px 10px 0px 20px;
background-color: #E0E2E3;
opacity: .9;
height: auto;
border-radius: 5px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.photo {
width: 100%;
position: relative;
text-align: center;
color: #282828;
}
img {
width: 100%;
height: auto;
}
/* Bottom left text */
.bottom-left {
position: absolute;
bottom: 8px;
left: 10px;
font-weight: 600;
font-size: 30px;
}
ul {
list-style-type: none;
margin: 15px;
padding: 0px;
line-height: 25px;
padding-bottom: auto;
}
i {
color: #1689AC;
}
/* BODY */
.aside, .item2, .item3 {
padding-bottom: 5px;
}
h2, h3 {
margin-left: 15px;
}
h2 {
padding-top: 15px;
padding-bottom: 15px;
font-weight: 700;
}
p {
margin-top: -15px;
padding-left: 15px;
font-weight: 500;
}
.item2 {
background-color: #E0E2E3;
opacity: .9;
margin: 10px 10px 0px 20px;
height: auto;
border-radius: 5px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.item3 {
grid-column-start: 2;
background-color: #E0E2E3;
opacity: .9;
margin: 10px 10px 0px 20px;
height: auto;
border-radius: 5px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.item3 h5, h6, p {
line-height: 20px;
}
.item3 h5 {
font-size: 1em;
display: inline;
}
.item3 h6 {
font-weight: 500;
margin-top: 5px;
font-size: .9em;
padding: 0px 0px 0px 15px;
margin-bottom: 10px;;
}
.item3 p {
margin-top: auto;
font-weight: 100;
}
/* PROGRESS BARS */
.progressBar {
width: 100%;
height: 20px;
background-color: #9DA3A4;
border-radius: 20px;
}
.skills {
height: inherit;
text-align: right;
padding-right: 5px;
font-size: .7em;
color: white;
border-radius: 20px;
}
.excel {width: 80%; background-color: #1689AC;}
.word {width: 100%;background-color: #1689AC;}
.spanish {width: 100%; background-color: #1689AC;}
.english {width: 80%; background-color: #1689AC;}
.french {width: 20%; background-color: #1689AC;}
/* FOOTER */
.footer {
display: flex;
flex-direction: column;
height: 100px;
text-align: center;
background-color: ;
}
#media only screen and (min-width: 768px) {
.grid-container {
display: grid;
grid-template-columns: 35% 65% ;
}
.item2, .item3 {
margin: 10px 10px 0px 5px;
}
}
<div class="grid-container">
<aside class="grid-item aside">
<div class="container photo">
<img src="Maca_profil.jpg" alt="profile picture">
<div class="bottom-left">Macarena </div>
</div>
<div class="row">
<ul>
<li><i class="fas fa-suitcase"></i> Lawyer</li>
<li><i class="fas fa-home"></i> Las Condes, Santiago, Chile</li>
<li><i class="fas fa-at"></i> Email: </li>
<li><i class="fas fa-phone-alt"></i> +********</li>
</ul>
<hr>
</div>
<div class="row">
<h2><i class="fas fa-asterisk"></i> Skills</h2>
<ul>
<li>Microsoft Excel
<div class="container progressBar">
<div class="skills excel">80%</div>
</div>
</li>
<li>Microsoft Word
<div class="container progressBar">
<div class="skills word">100%</div>
</div>
</li>
<li>Etc..</li>
</ul>
<h2><i class="fas fa-asterisk"></i> Languages</h2>
<ul>
<li>Español
<div class="container progressBar">
<div class="skills spanish">100%</div>
</div>
</li>
<li>English
<div class="container progressBar">
<div class="skills english">80%</div>
</div>
</li>
<li>Français
<div class="container progressBar">
<div class="skills french">20%</div>
</div>
</li>
</ul>
</div>
</aside>
<section class="grid-item">
<div class="item2">
<div class="contenu">
<h2><i class="fas fa-suitcase"></i> WORK EXPERIENCE</h2>
<h3>EY Consulting</h3>
<p> <i class="far fa-calendar-alt"></i> November 2014 – March 2017</p>
<ul>
<li><span class="souligne">Position</span>: Senior lawyer at the Santiago business tax advisory group.</li>
<li><span class="souligne">Relevant duties</span>: compilation, study and processing of relevant information on the specific business line of the client. Research and draft memorandums concerning the design of efficient tax structures for multinational clients. Involved in complex repatriation cases before Chilean Tax Authorities. Planning and implementation of corporate restructuring.</li>
</ul>
</div>
</div>
<div class="item3">
<h2><i class="fas fa-graduation-cap"></i> ACADEMIC BACKGROUND</h2>
<ul>
<li>
<h5>Pontifical Catholic University of Chile</h5>
<h6><i class="far fa-calendar-alt"></i> 2015 </h6>
<p>Advanced diploma “Litigation and New Procedures”</p>
</li>
<hr>
<li>
<h5>Arbitration Academy (Paris, France)</h5>
<h6><i class="far fa-calendar-alt"></i> 2012 </h6>
<p>Diploma "International Academy for Arbitration Law"</p>
<hr>
</li>
<li>
<h5>Catholic University of Chile</h5>
<h6><i class="far fa-calendar-alt"></i> 2008 – 2012</h6>
<p>Bachelor of Laws, Pontifical</p>
<hr>
</li>
<li>
<h5>High and Elementary School, Sagrado Corazón de Apoquindo</h5>
<h6><i class="far fa-calendar-alt"></i> 1998 – 2007</h6>
</li>
</ul>
</div>
</div>
</section>
<footer class="container footer">
<div class="row">
</div>
</footer>
Related
below is the code for both html and css. Please I really need help with this issue and I want a solution why the scrolling effect is not working after i tried using html{
scroll-behavior: smooth;
}.....I have tried also to use some java script short codes but it is still not working. I have designed it to scroll to a specific part of the page after clicking on the menu headings
<html lang="en">
<head>
<title> Anetin Super Structures</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="images/logo (1).png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<!--home section-->
<section id="coverphoto">
<img src="images/logomah.png" class="logo">
<div class="banner-text">
<h1 class="heading">Anetin Super Structures</h1>
<p class="paragraph">Engineering your dreams with us</p>
<div class="banner-btn">
<span></span> Find Out
<span></span> Read More
</div>
</div>
</section>
<div id="sideNav">
<nav>
<ul>
<li>HOME</li>
<li>FEATURES</li>
<li>SERVICES</li>
<li>TESTIMONIALS</li>
<li>ABOUT US</li>
</ul>
</nav>
</div>
<div id="menuBtn">
<img src="/images/menu-button.png" id="menu" >
</div>
<!--features sections-->
<section id="features">
<div class="title-text">
<p>FEATURES</p>
<h1>Why Choose Us</h1>
</div>
<div class="feature-box">
<div class="features">
<h1>Experienced Stuff</h1>
<div class="features-desk">
<div class="features-icon">
<i class="fa fa-shield"></i>
</div>
<div class="features-text">
<p>How we do it! On large scale construction our Architects normally manages the job with a construction manager and a design engineer supervising it.</p>
</div>
</div>
<h1>Pre Booking Online</h1>
<div class="features-desk">
<div class="features-icon">
<i class="fa fa-check-square-o"></i>
</div>
<div class="features-text">
<p>How we do it! On large scale construction our Architects normally manages the job with a construction manager and a design engineer supervising it.</p>
</div>
</div>
<h1>Affordable Cost</h1>
<div class="features-desk">
<div class="features-icon">
<i class="fa fa-usd"></i>
</div>
<div class="features-text">
<p>In every services that we offer we also make sure that they have affordable costs with quality work</p>
</div>
</div>
</div>
<div class="features-img">
<img src="images/feature.jpeg" >
</div>
</div>
</section>
<!--services section-->
<section id="services">
<div class="title-text">
<p>SERVICES</p>
<h1>We Provide Better</h1>
</div>
<div class="service-box">
<div class="single-service">
<img src="images/buildingN.jpeg">
<div class="overlay"></div>
<div class="service-descrip">
<h3>Construction</h3>
<hr>
<p></p>
</div>
</div>
<div class="single-service">
<img src="images/electrical eng.jpeg" >
<div class="overlay"></div>
<div class="service-descrip">
<h3>Electrical Engineering</h3>
<hr>
<p></p>
</div>
</div>
<div class="single-service">
<img src="images/Painting.jpeg" >
<div class="overlay"></div>
<div class="service-descrip">
<h3>Wall Painting</h3>
<hr>
<p>We pair you up with the ideal artist for your project. From wall paintings to wall art ideas for your office or homes - the ideas are endless.</p>
</div>
</div>
<div class="single-service">
<img src="images/pumblingN.jpeg" >
<div class="overlay"></div>
<div class="service-descrip">
<h3>Pumbling</h3>
<hr>
<p> We install, check, and replace fixtures in your home or commercial property to ensure that you obtain high-quality service and materials. Toilets, kitchen and bathroom sinks etc.</p>
</div>
</div>
<div class="single-service">
<img src="images/engineeringdrawings.jpeg" >
<div class="overlay"></div>
<div class="service-descrip">
<h3>Engineering Drawings</h3>
<hr>
<p></p>
</div>
</div>
<div class="single-service">
<img src="images/roofing.jpeg" >
<div class="overlay"></div>
<div class="service-descrip">
<h3>Roofing</h3>
<hr>
<p>Custom Roofs, Ceiling, Material, Installation, Supply and Manufacturing by our professional engineers</p>
</div>
</div>
</div>
</section>
<!--end of services section-->
<!--testimonial section-->
<section id="testimonial">
<div class="title-text">
<p>TESTIMONIALS</p>
<h1>What Client Says</h1>
</div>
<div class="testimonial-row">
<div class="testimonial-column">
<div class="user">
<img src="images/tatenda.jfif">
<div class="user-info">
<h4>TATENDA CHIKOMA <i class="fa fa-twitter"></i></h4>
<small>#taibo87</small>
</div>
</div>
<p>To say we're happy would be an understatement. When Anetin Team builds a home for you, they'll build it with care as if they were doing it for themselves and their families. Anetin Team would definitely be the one to build our next home in Southley Park, Harare.</p>
</div>
<div class="testimonial-column">
<div class="user">
<img src="images/nyasha.jfif">
<div class="user-info">
<h4> NYASHA MUGANHIRE<i class="fa fa-twitter"></i></h4>
<small>#nyaash_16!</small>
</div>
</div>
<p>I love this company. Very easy to talk to them and they really know how to save money and do quality stuff. Anetin Super Structures were great to work with, they did a complete remodel of our kitchen and two bathrooms providing best ceiling fitting and repairing the damaged water system. </p>
</div>
<div class="testimonial-column">
<div class="user">
<img src="images/lorraine.jpg">
<div class="user-info">
<h4>LORRAINE MHASHU <i class="fa fa-twitter"></i></h4>
<small>#lolo30_</small>
</div>
</div>
<p>If you need a new roof please do yourself a favour and get in touch with Anetin Super Structures. I can't say enough how awesome it was working with Anetin, they made the entire roofing beautifully i'm always grateful. </p>
</div>
</div>
</section>
<!--end of testimonial section-->
<!--footer section-->
<section id="footer">
<img src="images/brick layering.jpg" class="footer-img">
<div class="title-text">
<p>CONTACT</p>
<h1>Visit Shop Today</h1>
</div>
<div class="footer-row">
<div class="footer-left">
<h1>Opening Hours</h1>
<p><i class="fa fa-clock-o"></i>Monday to Friday - 8am to 5pm</p>
<p><i class="fa fa-clock-o"></i>Saturday and Sunday - 9am to 3pm</p>
</div>
<div class="footer-right">
<h1>Get In Touch</h1>
<p>7329 Limpopo Rd Zimre Park, Zimbabwe<i class="fa fa-map-marker"></i></p>
<p>anetinsuperstructures#gmail.com</p>
<p><i class="fa fa-phone"></i>+263 77 448 7726</p>
</div>
</div>
<div class="social-links">
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube-play"></i>
<p>© 2022 Anetin Super Structures. All Rights Reserved</p>
</div>
</section>
<!--end of footer section-->
<script>
var menuBtn = document.getElementById("menuBtn")
var sideNav = document.getElementById("sideNav")
var menu = document.getElementById("menu")
sideNav.style.right== "-250px"
menuBtn.onclick= function(){
if(sideNav.style.right== "-250px"){
sideNav.style.right= "0";
menu.src="/images/cancel.png";
}
else{
sideNav.style.right="-250px";
menu.src="/images/menu-button.png"
}
}
</script>
</body>
</html>
/*CSS*/
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
html{
scroll-behavior: smooth;
}
#coverphoto{
background: linear-gradient(rgba(0,0,0,0.5),#967300),url(../images/cover.jpeg);
background-size: cover;
background-position: center;
height: 100vh;
}
.logo{
width: 140px;
position: absolute;
top: 4%;
left: 10%;
}
.banner-text{
text-align: center;
color: #fff;
padding-top: 180px;
}
.banner-text h1{
font-size: 130px;
font-family: 'Kaushan Script', cursive;
animation: anim 2s;
}
.banner-text p{
font-size: 20px;
font-style: italic;
font-weight: 100;
animation: anim 1.5s .5s backwards;
}
#keyframes anim{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.banner-btn{
margin: 70px auto;
animation: anim 2s .8s backwards;
}
.banner-btn a{
width: 150px;
text-decoration: none;
display: inline-block;
margin: 0 10px;
padding: 12px 0;
color: #fff;
border: .5px solid #fff;
position: relative;
z-index: 1;
transition: color .5s;
}
.banner-btn a span{
width: 0%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #fff;
z-index: -1;
transition: .5s;
}
.banner-btn a:hover span{
width: 100%;
}
.banner-btn a:hover{
color: black;
}
#sideNav{
width: 250px;
height: 100vh;
position: fixed;
right: -250px;
top: 0;
background: #967300;
z-index: 2;
transition: .5s;
}
nav ul li{
list-style: none;
margin: 50px 20px;
color: #fff;
cursor: pointer;
}
nav ul li a {
text-decoration: none;
}
#menuBtn{
width: 30px;
height: 25px;
background: #967300;
text-align: center;
position: fixed ;
right: 50px;
top: 30px ;
border-radius: 3px;
z-index: 3;
cursor: pointer;
}
.menu-btn img{
width: 20px;
margin-top: 15px;
}
#media screen and (max-width: 770px) {
.banner-text h1{
font-size: 44px;
}
.banner-btn a{
display: block;
margin: 20px auto;
}`enter code here`
}
/* features*/
#features{
width: 100%;
padding: 70px 0;
}
.title-text{
text-align: center;
padding-bottom: 70px;
}
.title-text p{
margin: auto;
font-size: 20px;
color: #ddb01d;
font-weight: bold;
position: relative;
z-index: 1;
display: inline-block;
}
.title-text p::after{
content: '';
width: 50px;
height: 35px;
background: linear-gradient(#ddb01d, #fff) ;
position: absolute;
top: -20px;
left: 0;
z-index: -1;
transform: rotate(10deg);
border-top-left-radius: 35px;
border-bottom-right-radius: 35px;
}
.title-text h1{
font-size: 50px;
}
.feature-box{
width: 80%;
margin:auto ;
display: flex;
flex-wrap: wrap ;
align-items: center;
text-align: center;
}
.features{
flex-basis: 50%;
}
.features-img{
margin: auto;
flex-basis: 50%;
}
.features-img img{
width: 70%;
border-radius: 10px;
}
.features h1{
text-align: left;
margin-bottom: 10px;
font-weight: 100;
color: #967300;
}
.features-desk{
display: flex;
align-items: center;
margin-bottom: 40px;
}
.features-icon .fa{
width: 50px;
height: 50px;
font-size: 30px;
line-height: 50px;
border-radius: 8px;
color: #967300;
border: 1px solid #967300;
}
.features-text p{
padding: 0 20px;
text-align: initial;
}
#media screen and (max-width: 770px) {
.title-text h1{
font-size: 35px;
}
.features{
flex-basis: 100%;
}
.features-img{
flex-basis: 100%;
}
.features-img img{
width: 100%;
}
}
#services{
width: 100%;
padding: 70px 0;
background: #efefef;
}
.service-box{
width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: space-around ;
margin: auto;
}
.single-service{
flex-basis: 48%;
text-align: center;
border-radius: 7px;
margin-bottom: 20px;
color: #fff;
position: relative;
}
.single-service img{
width: 100%;
border-radius: 7px;
}
.overlay{
width: 100%;
height: 100%;
position: absolute;
top: 0;
border-radius: 7px;
cursor: pointer;
background: linear-gradient(rgba(0,0,0,0.5), #967300);
opacity: 0;
transition: 1s;
}
.single-service:hover .overlay{
opacity: 1;
}
.service-descrip{
bottom: 0;
left: 50%;
width: 80%;
position:absolute;
transform: translateX(-50%);
opacity: 0;
transition: 1s;
}
hr{
background: #fff;
height:2px ;
border: 0;
margin: 15px auto;
width: 60%;
}
.service-descrip p{
font-size: 14px;
}
.single-service:hover .service-descrip{
bottom: 40%;
opacity: 1;
}
#media screen and (max-width: 770px) {
.single-service{
flex-basis: 100%;
margin-bottom: 30px;
}
.service-descrip p{
font-size: 12px;
}
hr{
margin: 5px auto;
}
.single-service:hover .service-descrip{
bottom: 25% !important;
}
}
#testimonial{
width: 100%;
padding: 70px 0;
}
.testimonial-row{
width: 80%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
.testimonial-column{
flex-basis: 28%;
padding: 10px ;
margin-bottom: 30px;
border-radius: 5px ;
box-shadow: 0 10px 20px 3px #00968814;
cursor: pointer;
transition: transform .5s;
}
.testimonial-column p{
font-size: 14px;
}
.user{
display: flex;
margin: 2px 0px;
align-items: center;
}
.user img{
width: 40px;
margin-right: 20px;
border-radius: 3px;
}
.user-info .fa{
margin-left: 10px;
color: #27c0ff;
font-size: 20px;
}
.user-info small{
color: #009688;
}
.testimonial-column:hover{
transform: translateY(-7px);
}
#media screen and (max-width: 770px){
.testimonial-column{
flex-basis: 100%;
}
}
#footer{
padding: 100px 0 20px;
background: #efefef;
position: relative;
}
.footer-row{
width: 80%;
margin: 0 auto;
display: flex ;
justify-content: space-between;
flex-wrap: wrap;
}
.footer-left, .footer-right{
padding: 10px;
margin-bottom: 20px ;
flex-basis: 45% ;
}
.footer-right{
text-align: right;
}
.footer-row h1{
margin: 10px 0;
}
.footer-row p{
line-height: 35px;
}
.footer-left .fa, .footer-right .fa{
font-size: 20px;
color: #967300;
margin: 10px;
}
.footer-img{
max-width: 370px;
opacity: 0.1;
position:absolute;
left: 50%;
top: 35%;
transform: translate(-50%, -50%);
}
.social-links{
text-align: center;
}
.social-links .fa{
height: 40px;
width: 40px;
font-size: 20px;
line-height: 40px;
border: 1px solid #967300;
margin: 40px 5px 0;
transition: .5s;
}
.social-links .fa:hover{
background: #967300;
color: #fff;
transform: translateY(-7px);
cursor: pointer;
}
.social-links p{
font-size: 12px;
margin-top: 20px;
}
#media screen and (max-width: 770px){
.footer-left, .footer-right{
flex-basis: 100%;
font-size: 14px;
}
.footer-img{
top: 25%;
}
}
I think you must ad scroll-behavior: smooth; to body selector!
You can try this:
// anhor
const menuBtn = document.getElementById("menuBtn");
menuBtn?.addEventListener('click', function(e) {
e.preventDefault();
const target = document.getElementById("some-selector");
target.scrollIntoView({ behavior: "smooth", block: "start" });
});
:root {
--primary-color: #10b929ff;
--background-light-grey: #696969;
--background-dark-grey: #2f2f2f;
}
body {
background: var(--background-light-grey);
margin: 0;
font-family: 'Josefin Sans', sans-serif;
}
.navbar {
background: var(--background-dark-grey);
padding: 1em;
font-family: 'Josefin Sans', sans-serif;
//position: fixed;
}
footer {
background: #2f2f2f;
}
nav {
display: none;
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top:0;
background-color: var(--background-dark-grey);
height: 100%;
padding: 2em;
ul.primary-nav {
margin-top: 5em;
}
li {
a{
color: white;
text-decoration: none;
display: block;
padding: .5em;
text-align: right;
font-size: 30px;
&:hover{
font-weight: bold;
}
}
}
}
.mobile-menu-exit{
float: right;
margin: .5em;
cursor: pointer;
}
nav.menu-btn {
display: block;
}
.website-logo {
display: flex;
place-content: space-between;
}
.mobile-menu{
cursor: pointer;
width: 2em;
//max-width: 10%;
}
#media only screen and (max-width: 400px){
nav{
width: 44%;
padding-right: 30px;
}
}
#media only screen and (max-width: 768px){
.mobile-menu{
cursor: pointer;
width: 2em;
max-width: 10%;
}
.website-logo {
display: flex;
place-content: space-between;
img{
width: 200px;
}
}
.mobile-menu-exit{
float: right;
margin: .5em;
cursor: pointer;
max-width: 10%;
}
}
a {
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
section {
padding: 10em 0em 5em 0em;
}
.hero {
text-align: center;
//padding-bottom: 160px;
}
.hero-image{
background-image: url("https://am3pap006files.storage.live.com/y4pNuJohtpUdzBTZoc4fAQHlLNdeLvEQERim4Rs1KspeWQaKszREazNg4Ljnl7YTmkR6Sgsa4MUN4kB4aAf-vbbEuFnP9EPp2tAExe-dH_9o45qLndBetYu64mzC8r1Ynb8pOgWBAoqfzUL6lgg-Oue0OCqK6PPNliLbVrv6A3Yhuqalg__GtCNUkfzHJbwEuEtMWtpMjsvc_zHKMDeI1jNt5lG7eLxLiR5TluSAml-UuQ/IMG_0560.jpg?psid=1&width=720&height=486");
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
background-size: cover;
text-align: center;
padding-bottom: 160px;
}
.centre-col {
color: white;
h1 {
text-transform: uppercase;
font-weight: 600;
font-size: 3em;
resize: horizontal;
margin-bottom: 10px;
}
h3 {
font-weight: 200;
font-size: 1.2em;
margin-bottom: 20px;
}
.primary-cta {
background: var(--primary-color);
padding: .6em 1.3em;
text-decoration: none;
border-radius: 5em;
display: inline-block;
font-size: 1.5em;
}
}
.instagram-feed {
padding-top: 00px;
padding-bottom: 10px;
z-index: 0;
}
.eapps-link img {
display:none !important;
}
.club-vision-values {
background: var(--background-light-grey);
z-index: 1;
top: 40%;
padding-top: 0px;
text-align: center;
color: white;
margin-left: 2em;
margin-right: 2em;
margin-bottom: 10px;
padding-bottom: 20px;
margin-top: 10px;
position: relative;
}
.the-coaches{
padding: 20px;
ul{
max-width: 500px;
//padding-top: 10px;
display: gird;
grid-template-columns: repeat(3, 1fr);
justify-content: space-between;
align-items: center;
padding-left: 20px;
padding-right: 20px;
}
}
.coach-list {
column-count: 2;
max-width: 500px;
margin: auto;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
max-width: 800px;
margin: auto;
text-align: center;
background: var(--primary-color);
color: white;
margin-bottom: 40px;
h1 {
margin: 4px;
margin-top: 10px;
}
p {
font-size: 18px;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 8px;
//padding-top: 3px;
}
}
#media only screen and (min-width: 768px){
.coach-list {
column-count: 2;
max-width: 800px;
margin: auto;
}
}
#media only screen and (min-width: 1080px){
.coach-list {
display: inline;
max-width: 2600px;
display: flex;
justify-content: center;
}
.the-coaches{
padding: 20px;
padding-bottom: 40px;
margin: auto;
ul {
max-width: 2200px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 40px;
padding-right: 40px;
}
}
.card {
margin: 10px;
}
}
.footer{
margin:0;
padding: 0;
box-sizing: border-box;
}
.footer-container{
max-width: 1670px;
margin:auto;
}
.footer-col {
color: white;
width: 20%;
padding: 0 35px;
}
.footer-col h4{
font-size: 18px;
margin-bottom: 20px;
position: relative;
}
.about-us {
line-height: 25px;
}
.footer-col h4::before{
content: '';
position: absolute;
left:0;
bottom: -10px;
background-color: var(--primary-color);
height: 2px;
box-sizing: border-box;
width: 50px;
}
.row
{
display: flex;
flex-wrap: wrap;
}
ul{
list-style: none;
}
.footer{
padding: 60px;
}
.footer-col .social-links a{
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255,255,255,0.2);
margin:0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
color: #24262b;
background-color: #ffffff;
}
/*responsive*/
#media(max-width: 767px){
.footer-col{
width: 50%;
margin-bottom: 30px;
}
}
#media(max-width: 574px){
.footer-col{
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Era Boxing</title>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="navbar">
<div class="website-logo">
<img id="logo" class="logo" src="Images/logo.svg" alt="The club logo">
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Open Navigation">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Exit Navigation">
<ul class="primary-nav">
<li>Classes</li>
<li>FAQs</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<section class="hero-image">
<div class="container">
<!-- <img src="images/raul.JPG" alt="Raul"> -->
<div class="centre-col">
<h1>First-class boxing training<br>
for youths and adults alike</h1>
<h3>We provide a supportive and inclusive training environment</h3>
<div class="hero-cta">
View our timetable
</div>
</div>
</div>
</div>
</section>
<section class="instagram-feed">
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-a2b6cbed-0090-4fd3-9a99-b6ce405f0cbf"></div>
</section>
<section class="club-vision-values">
<div>
<h2>Our Club</h2>
<p>New-Era Boxing Club was formed in 2011 by Mark Bebbington and focuses on teaching core values as well as providing first class training for youths and adults alike</p>
</div>
<div>
<h2>Our Vision</h2>
<p>Our vision is to create opportunities for members through boxing, education and personal development in doing so we will provide a supportive and inclusive training environment.</p>
</div>
<div>
<h2>Our Values</h2>
<p>New Era Boxing emphasises the core value of Equality, Integrity, Compassion, Resilience and Humility at the heart of the clubs activities.</p>
</div>
</section>
<section class="the-coaches">
<div class="coach-list">
<ul class="left">
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
</div>
</div>
</section>
<footer class="footer">
<div class="footer-container">
<div class="row">
<div class="footer-col">
<h4>Phone Us</h4>
<ul>
<li>07830 085132</li>
</ul>
</div>
<div class="footer-col">
<h4>Email Us</h4>
<ul>
<li class="email">neweraboxing#hotmail.co.uk</li>
</ul>
</div>
<div class="footer-col">
<h4>About Us</h4>
<ul>
<li class="about-us"><a href="#">
FAQs
</a></li>
<li class="about-us"><a href="#">
Club Partners
</a></li>
<li class="about-us"><a href="#">
Timetable
</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Follow Us</h4>
<div class="social-links">
<i class="fab fa-facebook-f"></i></i>
<i class="fab fa-instagram"></i></i>
<i class="fab fa-twitter"></i></i>
<i class="fab fa-whatsapp"></i></i>
</div>
</div>
</div>
</div>
</footer>
<script>
const mobileBtn = document.getElementById('mobile-cta')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit');
mobileBtn.addEventListener('click', () => {
nav.classList.add('menu-btn');
})
mobileBtnExit.addEventListener('click', () => {
nav.classList.remove('menu-btn');
})
</script>
</body>
</html>
I am viewing my website in the Developer tools but whenever I try to view it in a mobile resolution below 400px wide it seems to add this unwanted padding to the right side. Sometimes this disappears, but other times it just stays there. Is this a common issue and are there any suggestions on how to fix this please?
enter image description here
I am trying to get scroll-behavior to work on this site. I have put the scroll-container, put ids, fixed css, but it is just not working. Any ideas as to why smooth-scrolling is NOT working on this?
What I need is the navbar area smooth scroll to the appropriate areas on the page. So Menu to Menu, Deals to Deals, About to About etc...I can't figure out why the smooth scrolling isn't working. Any ideas? Thanks!
/* Main Body Styles */
body {
margin: 0;
width: 100%;
height: auto;
box-sizing: border-box;
text-align: center;
background-color: #f9f9f9;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%238b8b8b' fill-opacity='0.07' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
font-family: var(--main-font);
}
a {
cursor: pointer;
outline: none;
text-decoration: none;
}
hr {
border: 0;
height: 1px;
margin: 0 0 1.5em 0;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
.hr2 {
margin: 0 auto;
width: 50%;
}
.scroll-box {
scroll-behavior: smooth;
overflow-y: scroll;
}
:root {
--main-box-shadow:-5px 6px 59px -4px rgba(77,77,77,1);
--main-color: #d30404;
--main-text-shadow: 0px 3px 6px rgba(150, 150, 150, 1);
--fancy-font: 'Rock Salt', cursive;
--main-font: 'Raleway', sans-serif;
}
/* Header */
.header-image {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/header.jpg');
background-size:cover;
background-position: center;
background-attachment: fixed;
width: 100%;
height: 40em;
}
.header-wrapper {
padding-top: 1.5em;
}
.header-logo {
margin: 0;
padding-bottom: 1.25em;
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 5em;
text-shadow: -2px 2px 7px rgba(0, 0, 0, .25);
letter-spacing: .115em;
}
.menu-btn {
border: none;
border-radius: 2em;
padding: 1em 3.25em;
background: #d30404;
color: #efefef;
box-shadow: 0px 30px 95px -15px rgba(0,0,0,.5);
font-size: 1.15em;
}
/* Hours of Operation */
.hours-wrapper {
background-color: red;
}
.hours-header {
margin: 0;
}
.hours-list {
list-style: none;
padding: 0;
}
/* Navbar */
.nav {
margin: 0;
}
.menu-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/menu.jpg');
}
.deals-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/dough.jpg');
}
.about-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/storefront.jpg');
}
.contact-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/oven.jpg');
}
.box-logo {
margin: 0;
padding: 1.5em;
color: white;
font-size: 2em;
font-family: 'Rock Salt', cursive;
text-shadow: -2px 2px 7px rgba(0, 0, 0, .25);
}
.box {
box-shadow: inset -1px 1px 43px -9px rgba(0,0,0,1);
background-position: center;
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 10em;
}
/* Menu */
.menu-title {
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 4em;
margin: 0;
padding: 1em 0 .25em 0;
text-shadow: var(--main-text-shadow);
}
.menu-gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.menu-item {
margin: 2em 0;
}
.menu-pic {
width: auto;
height: 15em;
margin: .5em;
box-shadow: -12px 11px 39px -12px rgba(0,0,0,0.81);
}
.pic2,
.pic6 {
width: 95%;
}
.menu-heading {
font-family: 'Raleway', sans-serif;
font-weight: bolder;
font-size: 1.5em;
}
/* Deals */
.deal-wrapper {
padding: 1.5em 0;
}
.deals {
margin: 0;
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 3em;
text-shadow: var(--main-text-shadow);
}
.deal-img {
width: auto;
height: 15em;
margin: 1em;
box-shadow: -12px 11px 39px -12px rgba(0,0,0,0.81);
}
/* About */
.about {
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 3.5em;
margin: 0;
text-shadow: var(--main-text-shadow);
}
.store-pic {
margin: 2em 0;
width: 100%;
height: auto;
box-shadow: -1px 3px 17px -4px rgba(150,150,150,0.8);
}
.about-par {
font-family: 'Raleway', sans-serif;
font-size: 1.115em;
line-height: 180%;
padding: 1.35em 0;
margin: 0 auto;
max-width: 33ch;
}
/* Reviews */
.review-wrapper {
padding-top: 2em;
}
.review {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-family: 'Nunito', sans-serif;
font-style: italic;
max-width: 32ch;
margin: 0 auto;
}
.fa-yelp {
color: #d32323;
}
.fa-facebook-f {
color: #3b5998;
}
/* Footer */
.footer-wrapper {
background-color: #d30404;
box-shadow: inset 0px 1px 52px -10px rgba(0, 0, 0, .115);
width: 100%;
height: 5em;
display: flex;
justify-content: center;
}
.footer-social {
display: flex;
justify-content: space-around;
padding: .75em 0;
}
.social {
color: white;
text-shadow: -3px 2px 5px rgba(0, 0, 0, 0.25);
}
.footer-cred {
font-size: .75em;
color: white;
text-shadow: -3px 2px 5px rgba(0, 0, 0, 0.25);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dinos Pizza</title>
<link rel="stylesheet" href="/Users/rogerjorns/Desktop/DinosMain/assets/index.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway|Rock+Salt|Nunito" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<!-- Header -->
<header class="header-image">
<div class="header-wrapper">
<h1 class="header-logo">Dino's Pizza</h1>
</div>
Check our Menu
</header>
<!-- Hours of Operation -->
<div class="hours-wrapper">
<h2 class="hours-header">Hours of Operation</h2>
<ul class="hours-list">
<li class="hours">** Closed Mondays **</li>
<li class="hours">Tues - Thurs: 11am - 8pm</li>
<li class="hours">Fri - Sat: 11am - 9pm</li>
<li class="hours">Sun: 2pm - 8pm</li>
</ul>
</div>
<!-- Navbar -->
<div class="nav">
<div href="#menu" class="menu-box box">
<h2 class="box-logo">Menu</h2>
</div>
<div href="#deals" class="deals-box box">
<h2 class="box-logo">Deals</h2>
</div>
<div href="#about" class="about-box box">
<h2 class="box-logo">About Us</h2>
</div>
<div href="#contact" class="contact-box box">
<h2 class="box-logo">Contact</h2>
</div>
</div>
<scroll-container>
<!-- Menu -->
<div class="menu-wrapper">
<h1 id="menu" class="menu-title title scrolling-box">Menu</h1>
<hr>
<div class="menu-gallery">
<div class="menu-item">
<img class="menu-pic pic1" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/allmeat.jpg" alt="">
<h3 class="menu-heading">All-Meat</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic2" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/hawaiian.jpg" alt="">
<h3 class="menu-heading">Hawaiian</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic3" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/veggie.jpg" alt="">
<h3 class="menu-heading">Veggie</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic4" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/onetopping.jpg" alt="">
<h3 class="menu-heading">One Topping</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic5" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/twotopping.jpg" alt="">
<h3 class="menu-heading">Two Topping</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic6" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/cheesybread.jpg" alt="">
<h3 class="menu-heading">Cheesy Bread</h3>
<p class="menu-price">$11.95</p>
</div>
</div>
</div>
<hr>
<!-- Deals -->
<div class="deal-wrapper">
<scroll-page><h2 id="deals" class="deals scrolling-box">Deals</h2></scroll-page>
<hr class="hr2">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal.jpg" alt="">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal2.jpg" alt="">
</div>
<!-- About Us -->
<hr>
<div class="about-wrapper">
<h2 id="about" class="about scrolling-box">About Us</h2>
<hr class="hr2">
<img class="store-pic" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/storefront.jpg" alt="">
<hr class="hr2">
<p class="about-par">With aspirations to go into the restaurant business for many years,
our dream became a reality in May 2014 when we opened the doors to Dino's Pizza in the great city of Blue Mound, TX.
With a passion to serve up the best-tasting pizza and wings in town, made from quality ingredients,
we look forward to having you as a guest at our restaurant or delivering straight to your door.</p>
<br>
<p class="about-par">At Dino's Pizza we pride ourselves in serving our customers with the utmost professionalism, friendliness, integrity and cleanliness.
We make our pizza dough fresh from scratch daily.
Dino's is committed to serving delicious, hot home-made tasting pizzas and savory wings day in and day out.</p>
<br>
<p class="about-par">Dino's Pizza is family-owned and operated.
Our freshly made dough, homemade sauce, and real shredded cheese make a difference you will definitely taste!
And our appetizing, flavorful chicken wingsand dessert options are second to none!</p>
<p class="about-par">Don't just take our word for it...check out what our loyal customers have to say
on Yelp, then order and be prepared to taste
and experience awesomeness for yourself! The Dino's Way!</p>
</div>
<hr class="hr2">
<!-- Reviews -->
<div class="review-wrapper">
<h3 class="review">"I've never had anything less than an outstanding meal from Dino's."</h3>
<p> - Brittani <i class="fab fa-yelp"></i></p>
</div>
<div class="review-wrapper">
<h3 class="review">"Pizza was some of the best I've ever eaten! We will definitely be ordering again."</h3>
<p> - Michelle <i class="fab fa-yelp"></i></p>
</div>
<div class="review-wrapper">
<h3 class="review">"This is by far the Best pizza near me. I haven't bought pizza from anywhere else since..."</h3>
<p> - Kevin <i class="fab fa-facebook-f"></i></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I couldn't stop eating the pizza. There's something in the crust they use that is impossible to describe other than heavenly."</h3>
<p> - Matthew <i class="fab fa-yelp"></i></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I've yet to find the perfect pizza place until now and you guys nail it every time!"</h3>
<p> - J.C. <i class="fab fa-yelp"></i></p>
<div class="review-wrapper">
<h3 class="review">"The staff is super friendly and the pizza is awesome!! This is by far the best pizza I've had in Texas!!!"</h3>
<p> - Benjamin <i class="fab fa-facebook-f"></i></p>
</div>
<!-- Contact -->
<div class="footer-wrapper">
<footer>
<div class="footer-social">
<i class="fab fa-yelp social"></i>
<i class="fab fa-facebook-f social"></i>
<i class="fab fa-twitter social"></i>
</div>
<div class="footer-cred">
<p>Created by</p>
</div>
</footer>
</div>
</scroll-container>
</body>
</html>
You just need to add scroll-behavior: smooth; to your html style.
See the below Snippet:
/* Main Body Styles */
body {
margin: 0;
width: 100%;
height: auto;
box-sizing: border-box;
text-align: center;
background-color: #f9f9f9;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%238b8b8b' fill-opacity='0.07' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
font-family: var(--main-font);
}
html{
scroll-behavior: smooth;
}
a {
cursor: pointer;
outline: none;
text-decoration: none;
}
hr {
border: 0;
height: 1px;
margin: 0 0 1.5em 0;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
.hr2 {
margin: 0 auto;
width: 50%;
}
.scroll-box {
scroll-behavior: smooth;
overflow-y: scroll;
}
:root {
--main-box-shadow:-5px 6px 59px -4px rgba(77,77,77,1);
--main-color: #d30404;
--main-text-shadow: 0px 3px 6px rgba(150, 150, 150, 1);
--fancy-font: 'Rock Salt', cursive;
--main-font: 'Raleway', sans-serif;
}
/* Header */
.header-image {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/header.jpg');
background-size:cover;
background-position: center;
background-attachment: fixed;
width: 100%;
height: 40em;
}
.header-wrapper {
padding-top: 1.5em;
}
.header-logo {
margin: 0;
padding-bottom: 1.25em;
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 5em;
text-shadow: -2px 2px 7px rgba(0, 0, 0, .25);
letter-spacing: .115em;
}
.menu-btn {
border: none;
border-radius: 2em;
padding: 1em 3.25em;
background: #d30404;
color: #efefef;
box-shadow: 0px 30px 95px -15px rgba(0,0,0,.5);
font-size: 1.15em;
}
/* Hours of Operation */
.hours-wrapper {
background-color: red;
}
.hours-header {
margin: 0;
}
.hours-list {
list-style: none;
padding: 0;
}
/* Navbar */
.nav {
margin: 0;
}
.menu-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/menu.jpg');
}
.deals-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/dough.jpg');
}
.about-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/storefront.jpg');
}
.contact-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/oven.jpg');
}
.box-logo {
margin: 0;
padding: 1.5em;
color: white;
font-size: 2em;
font-family: 'Rock Salt', cursive;
text-shadow: -2px 2px 7px rgba(0, 0, 0, .25);
}
.box {
box-shadow: inset -1px 1px 43px -9px rgba(0,0,0,1);
background-position: center;
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 10em;
}
/* Menu */
.menu-title {
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 4em;
margin: 0;
padding: 1em 0 .25em 0;
text-shadow: var(--main-text-shadow);
}
.menu-gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.menu-item {
margin: 2em 0;
}
.menu-pic {
width: auto;
height: 15em;
margin: .5em;
box-shadow: -12px 11px 39px -12px rgba(0,0,0,0.81);
}
.pic2,
.pic6 {
width: 95%;
}
.menu-heading {
font-family: 'Raleway', sans-serif;
font-weight: bolder;
font-size: 1.5em;
}
/* Deals */
.deal-wrapper {
padding: 1.5em 0;
}
.deals {
margin: 0;
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 3em;
text-shadow: var(--main-text-shadow);
}
.deal-img {
width: auto;
height: 15em;
margin: 1em;
box-shadow: -12px 11px 39px -12px rgba(0,0,0,0.81);
}
/* About */
.about {
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 3.5em;
margin: 0;
text-shadow: var(--main-text-shadow);
}
.store-pic {
margin: 2em 0;
width: 100%;
height: auto;
box-shadow: -1px 3px 17px -4px rgba(150,150,150,0.8);
}
.about-par {
font-family: 'Raleway', sans-serif;
font-size: 1.115em;
line-height: 180%;
padding: 1.35em 0;
margin: 0 auto;
max-width: 33ch;
}
/* Reviews */
.review-wrapper {
padding-top: 2em;
}
.review {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-family: 'Nunito', sans-serif;
font-style: italic;
max-width: 32ch;
margin: 0 auto;
}
.fa-yelp {
color: #d32323;
}
.fa-facebook-f {
color: #3b5998;
}
/* Footer */
.footer-wrapper {
background-color: #d30404;
box-shadow: inset 0px 1px 52px -10px rgba(0, 0, 0, .115);
width: 100%;
height: 5em;
display: flex;
justify-content: center;
}
.footer-social {
display: flex;
justify-content: space-around;
padding: .75em 0;
}
.social {
color: white;
text-shadow: -3px 2px 5px rgba(0, 0, 0, 0.25);
}
.footer-cred {
font-size: .75em;
color: white;
text-shadow: -3px 2px 5px rgba(0, 0, 0, 0.25);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dinos Pizza</title>
<link rel="stylesheet" href="/Users/rogerjorns/Desktop/DinosMain/assets/index.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway|Rock+Salt|Nunito" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<!-- Header -->
<header class="header-image">
<div class="header-wrapper">
<h1 class="header-logo">Dino's Pizza</h1>
</div>
Check our Menu
</header>
<!-- Hours of Operation -->
<div class="hours-wrapper">
<h2 class="hours-header">Hours of Operation</h2>
<ul class="hours-list">
<li class="hours">** Closed Mondays **</li>
<li class="hours">Tues - Thurs: 11am - 8pm</li>
<li class="hours">Fri - Sat: 11am - 9pm</li>
<li class="hours">Sun: 2pm - 8pm</li>
</ul>
</div>
<!-- Navbar -->
<div class="nav">
<div href="#menu" class="menu-box box">
<h2 class="box-logo">Menu</h2>
</div>
<div href="#deals" class="deals-box box">
<h2 class="box-logo">Deals</h2>
</div>
<div href="#about" class="about-box box">
<h2 class="box-logo">About Us</h2>
</div>
<div href="#contact" class="contact-box box">
<h2 class="box-logo">Contact</h2>
</div>
</div>
<scroll-container>
<!-- Menu -->
<div class="menu-wrapper">
<h1 id="menu" class="menu-title title scrolling-box">Menu</h1>
<hr>
<div class="menu-gallery">
<div class="menu-item">
<img class="menu-pic pic1" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/allmeat.jpg" alt="">
<h3 class="menu-heading">All-Meat</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic2" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/hawaiian.jpg" alt="">
<h3 class="menu-heading">Hawaiian</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic3" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/veggie.jpg" alt="">
<h3 class="menu-heading">Veggie</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic4" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/onetopping.jpg" alt="">
<h3 class="menu-heading">One Topping</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic5" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/twotopping.jpg" alt="">
<h3 class="menu-heading">Two Topping</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic6" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/cheesybread.jpg" alt="">
<h3 class="menu-heading">Cheesy Bread</h3>
<p class="menu-price">$11.95</p>
</div>
</div>
</div>
<hr>
<!-- Deals -->
<div class="deal-wrapper">
<scroll-page><h2 id="deals" class="deals scrolling-box">Deals</h2></scroll-page>
<hr class="hr2">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal.jpg" alt="">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal2.jpg" alt="">
</div>
<!-- About Us -->
<hr>
<div class="about-wrapper">
<h2 id="about" class="about scrolling-box">About Us</h2>
<hr class="hr2">
<img class="store-pic" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/storefront.jpg" alt="">
<hr class="hr2">
<p class="about-par">With aspirations to go into the restaurant business for many years,
our dream became a reality in May 2014 when we opened the doors to Dino's Pizza in the great city of Blue Mound, TX.
With a passion to serve up the best-tasting pizza and wings in town, made from quality ingredients,
we look forward to having you as a guest at our restaurant or delivering straight to your door.</p>
<br>
<p class="about-par">At Dino's Pizza we pride ourselves in serving our customers with the utmost professionalism, friendliness, integrity and cleanliness.
We make our pizza dough fresh from scratch daily.
Dino's is committed to serving delicious, hot home-made tasting pizzas and savory wings day in and day out.</p>
<br>
<p class="about-par">Dino's Pizza is family-owned and operated.
Our freshly made dough, homemade sauce, and real shredded cheese make a difference you will definitely taste!
And our appetizing, flavorful chicken wingsand dessert options are second to none!</p>
<p class="about-par">Don't just take our word for it...check out what our loyal customers have to say
on Yelp, then order and be prepared to taste
and experience awesomeness for yourself! The Dino's Way!</p>
</div>
<hr class="hr2">
<!-- Reviews -->
<div class="review-wrapper">
<h3 class="review">"I've never had anything less than an outstanding meal from Dino's."</h3>
<p> - Brittani <i class="fab fa-yelp"></i></p>
</div>
<div class="review-wrapper">
<h3 class="review">"Pizza was some of the best I've ever eaten! We will definitely be ordering again."</h3>
<p> - Michelle <i class="fab fa-yelp"></i></p>
</div>
<div class="review-wrapper">
<h3 class="review">"This is by far the Best pizza near me. I haven't bought pizza from anywhere else since..."</h3>
<p> - Kevin <i class="fab fa-facebook-f"></i></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I couldn't stop eating the pizza. There's something in the crust they use that is impossible to describe other than heavenly."</h3>
<p> - Matthew <i class="fab fa-yelp"></i></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I've yet to find the perfect pizza place until now and you guys nail it every time!"</h3>
<p> - J.C. <i class="fab fa-yelp"></i></p>
<div class="review-wrapper">
<h3 class="review">"The staff is super friendly and the pizza is awesome!! This is by far the best pizza I've had in Texas!!!"</h3>
<p> - Benjamin <i class="fab fa-facebook-f"></i></p>
</div>
<!-- Contact -->
<div class="footer-wrapper">
<footer>
<div class="footer-social">
<i class="fab fa-yelp social"></i>
<i class="fab fa-facebook-f social"></i>
<i class="fab fa-twitter social"></i>
</div>
<div class="footer-cred">
<p>Created by</p>
</div>
</footer>
</div>
</scroll-container>
</body>
</html>
You can test scroll behaviour at jsfiddle as well
I am trying to make my footer stay at the bottom of the page and have been going through some of the youtube tutorials. For some strange reason, they do work when I tried the footer by itself but when combining with my other elements, I seem to have some problems with not only getting the footer to be at the bottom of the page but I can't also get my display: inline-block to work well....
I have been trying to follow this tutorial: https://www.youtube.com/watch?v=qlCIXXhSX6Y&t=191s and https://www.youtube.com/watch?v=FGBsGqn7ac8&lc=z22eihehdzrajv13qacdp4334oiod53pnruzdum2ru1w03c010c.1541183153454115
I have a separate footer.php and have included into my index.php file.... Should I have my div ids in the index.php page or footer.php?
This is my footer code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class="content">
<footer>
<div class="main-footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="footer-bg">
<div class="footer-address">
<h1>Learn Classical Music at <span>PianoCourse101</span></h1>
<h2>Location: Australia, Melbourne</h2>
</div>
<div class="footer-email-phone">
<ul>
<li><i class="fa fa-phone"></i>+123-456-7890</li>
<li><i class="fa fa-envelope"></i>info#pianocourse101.com</li>
</ul>
</div>
<div class="footer-social-icons">
<ul>
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-google-plus"></i></li>
<li><i class="fab fa-youtube"></i></li>
<li><i class="fab fa-linkedin"></i></li>
</ul>
</div>
</div>
</div>
<div class="col-md-12">
<div class="footer-menu">
<ul>
<li>Home</li>
<li>More Information</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-strip">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="footer-text">
<p>2018 # All Rights</p>
</div>
</div>
</div>
</div>
</div>
</footer>
</section>
</body>
</html>
This is my index.php page
<!DOCTYPE html>
<html>
<head>
<title>PianoCourse101</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Aldrich|Mr+Dafoe" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity=">sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Lobster|Monoton|Orbitron" rel="stylesheet">
</head>
<body>
<!DOCTYPE html><html><head><meta charset="utf-8">
<link
rel="stylesheet"
href = "style.css"
media="screen,projection,tv"
>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
<link
rel="stylesheet"
href = "https://fonts.googleapis.com/css?family=Pacifico"
>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to PianoCourse101</title>
<div id="container">
<div id="main">
<header>
<div class="header2_welcome">
<h1>Welcome to PianoCourse101</h1>
</div>
</header>
<section class="content">
<div class="crotchet">
<p>𝅘𝅥</p>
</div>
<div class="minim">
<p>𝅗𝅥</p>
</div>
<div class="quaver">
<p>𝅘𝅥𝅮</p>
</div>
<img class="pc101" src="includes/pictures/pc101.gif" alt="pianocourse101/">
<div class="music"><i class="fas fa-music fa-8x"></i></div>
<div class="sharp"><p>♯</p></div>
<div class="natural"><p>♮</p></div>
<div class="flat"><p>♭</p></div>
<article>
<div class="first">
<h2>At PianoCourse101, your child can now learn how to play Classical music right from the comfort of your own home! We understand that as a busy mum, you might not have the time to take your child for piano lessons and also, it is a daunting process to find a good quality teacher. Put all of those thoughts aside because PianoCourse101 offers a complete course from the beginning to the advanced levels. It is based on "The Bastien Piano Basics Series" for children and for a limited time, students can watch the Primer Level lessons for <span class="first_free">free!</span> If you would like to continue your lessons beyond Primer Level, you can opt to purchase our Level 1, Level 2, or Level 3 course.<br></br>Currently, the lessons are aimed primarily for children but there will be lessons for adults in the near future. We would appreciate if you could donate to our website if you are enjoying your learning experience with us. This will assist us in maintaining our website and to be able to upload more videos.<br></br> Mr Lee has over ten years of piano teaching experience and also has completed an educational degree and obtained a 4th year in psychology degree. We understand that learning the piano can be boring and hence, we are trying our best to make piano learning a fun and interactive experience for you and your child.<br></br>PianoCourse101 is located in Australia, Melbourne and all fees are in the AUD currency. Student will receive an invoice upon the completion of purchasing a course.</h2>
</div>
</article>
<div class="form">
<form class="signup-form" action="newsletters.php" method="POST">
<div class="newsletters">
<label>Enter your E-mail Address</label>
</div>
<br></br>
<div class="index_form"><center><input type="text" name='email' placeholder="Enter E-mail Address"></center>
<br></br>
<center><button type="submit" name="submit">Subscribe to PianoCourse101!</button></center>
<br></br>
</div>
</form>
</div>
<img class="snoopy" src="includes/pictures/snoopy.jpg" alt="snoopy playing the piano" />
<div class="services_heading">Services</div>
<div class="services">
<div class="service1">
<h1>Level 1</h1>
<p id="piano">🎹</p>
<p>Purchase the Level 1 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $100<br>Yearly fee: $800</p>
</div>
<div class="service1">
<h1>Level 2</h1>
<p id="violin">🎻</p>
<p>Purchase the Level 2 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $150<br>Yearly fee: $1300</p>
</div>
<div class="service1">
<h1>Level 3</h1>
<p id="sax">🎷</p>
<p>Purchase the Level 3 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $200<br>Yearly fee: $1800</p>
</div>
</div>
<span class="index_views">There are <span class="views"><?php echo " ",htmlspecialchars($views); ?></span><?php echo " "; ?>visitors who have visited this page!</span>
</section>
<footer id="footer">
<?php include_once 'footer.php'; ?>
</footer>
</div>
</div>
</body>
</html>
This is my css for my footer:
.main-footer {
width: 100%;
height: auto;
background-image: url(includes/pictures/piano.jpg);
-webkit-background-size: cover;
-ms-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
padding: 20px 0px;
}
.footer-bg {
width: 100%;
height: auto;
margin: auto;
padding: 30px;
background-color: #fff;
text-align: center;
border: 4px solid #ff6a00;
}
.footer-address {
width: 100%;
height: auto;
margin: auto;
margin-top:5px;
}
.footer-address h1 {
font-family: Arial, Helvetica, sans-serif;
color: #222;
text-align: center;
font-weight: bold;
text-transform: uppercase;
font-size: 20px;
line-height: 1.5;
}
.footer-address h1 span {
color: #ff6a00;
}
.footer-address h2 {
font-family: Arial, Helvetica, sans-serif;
color: #222;
text-align: center;
font-weight: 500;
text-transform: uppercase;
font-size: 14px;
line-height: 1.5;
}
.footer-email-phone {
width: 100%;
height: auto;
margin: auto;
margin-top: 5px;
}
.footer-email-phone ul {
margin: 0px;
padding: 0px;
text-align: center;
}
.footer-email-phone ul li {
display: inline-block;
}
.footer-email-phone ul li a {
font-family: Arial, Helvetica, sans-serif;
color: #333;
font-weight: 600;
text-transform: uppercase;
font-size: 13px;
padding-left: 20px;
}
.footer-email-phone ul li a i {
color: #ff6a00;
padding-right: 5px;
}
.footer-email-phone ul li a:hover {
color: #ff6a00;
}
.footer-email-phone ul li a:hover i {
color: #333;
}
.footer-social-icons {
width: 100%;
height: auto;
margin: auto;
margin-top: 5px;
}
.footer-social-icons ul {
margin: 0px;
padding: 0px;
text-align: center;
}
.footer-social-icons ul li {
display: inline-block;
width: 30px;
height: 30px;
background: #fff;
margin-right: 10px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(255,106,0,1);
-moz-box-shadow: 0px 0px 5px 0px rgba(255,106,0,1);
box-shadow: 0px 0px 5px 0px rgba(255,106,0,1);
text-align: center;
margin-top: 12px;
}
.footer-social-icons ul li a {
font-size: 15px;
color: #ff6a00;
line-height: 30px;
display: block;
}
.footer-social-icons ul li:nth-child(1):hover {
background: #3b5999;
}
.footer-social-icons ul li:nth-child(2):hover {
background: #55acee;
}
.footer-social-icons ul li:nth-child(3):hover {
background: #dd4b39;
}
.footer-social-icons ul li:nth-child(4):hover {
background: #cd201f;
}
.footer-social-icons ul li:nth-child(5):hover {
background: #0077b5;
}
.footer-social-icons ul li:nth-child(1):hover a{
color: #fff;
}
.footer-social-icons ul li:nth-child(2):hover a{
color: #fff;
}
.footer-social-icons ul li:nth-child(3):hover a{
color: #fff;
}
.footer-social-icons ul li:nth-child(4):hover a{
color: #fff;
}
.footer-social-icons ul li:nth-child(5):hover a{
color: #fff;
}
.footer-menu {
width: 100%;
height: auto;
margin: auto;
margin-top: 10px;
}
.footer-menu ul {
margin: 0px;
padding: 0px;
text-align: center;
}
.footer-menu ul li {
display: inline-block;
}
.footer-menu ul li a {
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
font-weight: 600;
text-transform: uppercase;
font-size: 14px;
}
.footer-menu ul li:after {
content: "|";
font-family: 'FontAwesome';
color: #fff;
margin-left: 8px;
margin-right: 8px;
}
.footer-menu ul li:nth-child(3):after {
content: "";
}
.footer-menu ul li a:hover {
color: #ff6a00;
}
.footer-strip {
width: 100%;
height: auto;
margin: auto;
border-top: 2px solid #fff;
margin-top: 5px;
}
.footer-text {
width: 100%;
height: auto;
margin: auto;
margin-top: 5px;
}
.footer-text p {
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: center;
font-weight: 400;
text-transform: uppercase;
font-size: 13px;
}
.footer-text p a {
font-family: Arial, Helvetica, sans-serif;
color: #fff;
font-weight: 400;
text-transform: uppercase;
font-size: 13px;
}
.footer-text p a:hover {
color: #ff6a00;
}
[enter image description here][1]
all the html you need for your footer include is:
<div class="main-footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="footer-bg">
<div class="footer-address">
<h1>Learn Classical Music at <span>PianoCourse101</span></h1>
<h2>Location: Australia, Melbourne</h2>
</div>
<div class="footer-email-phone">
<ul>
<li><i class="fa fa-phone"></i>+123-456-7890</li>
<li><i class="fa fa-envelope"></i>info#pianocourse101.com</li>
</ul>
</div>
<div class="footer-social-icons">
<ul>
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-google-plus"></i></li>
<li><i class="fab fa-youtube"></i></li>
<li><i class="fab fa-linkedin"></i></li>
</ul>
</div>
</div>
</div>
<div class="col-md-12">
<div class="footer-menu">
<ul>
<li>Home</li>
<li>More Information</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-strip">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="footer-text">
<p>2018 # All Rights</p>
</div>
</div>
</div>
</div>
</div>
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%