I crreated this full-width section using Bootstrap 4. On large screen they look ok, but as I decrease the screensize the column heights are not equal. How can I make them equal heights so it will not affect if one contains more content than the other?
This what I see:
I tried to add 100% height to the services-3-box-wrapper class. Any help is appreciated.
#services-3 {
padding-top: 0px;
padding-bottom: 0px;
}
#services-3 .container-fluid {
padding-left: 0;
padding-right: 0;
}
#services-3 .service-box-1 {
background-color: #199adb;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 45px;
padding-right: 45px;
}
#services-3 .service-box-1 .sb-icon i {
color: #ffffff;
font-size: 40px;
}
#services-3 .service-box-1 .sb-title {
margin-top: 20px;
}
#services-3 .service-box-1 .sb-title h5 {
color: #ffffff;
text-align: center;
text-transform: uppercase;
font-weight: 600;
font-size: 19px;
}
#services-3 .service-box-1 .sb-desc p {
color: #ffffff;
text-align: center;
}
#services-3 .service-box-2 {
background-color: #5eb8e4;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 45px;
padding-right: 45px;
}
#services-3 .service-box-2 .sb-icon i {
color: #ffffff;
font-size: 40px;
}
#services-3 .service-box-2 .sb-title {
margin-top: 20px;
}
#services-3 .service-box-2 .sb-title h5 {
color: #ffffff;
text-align: center;
text-transform: uppercase;
font-weight: 600;
font-size: 19px;
}
#services-3 .service-box-2 .sb-desc p {
color: #ffffff;
text-align: center;
}
#services-3 .service-box-3 {
background-color: #199adb;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 45px;
padding-right: 45px;
}
#services-3 .service-box-3 .sb-icon i {
color: #ffffff;
font-size: 40px;
}
#services-3 .service-box-3 .sb-title {
margin-top: 20px;
}
#services-3 .service-box-3 .sb-title h5 {
color: #ffffff;
text-align: center;
text-transform: uppercase;
font-weight: 600;
font-size: 19px;
}
#services-3 .service-box-3 .sb-desc p {
color: #ffffff;
text-align: center;
}
#services-3 .service-box-4 {
background-color: #5eb8e4;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 45px;
padding-right: 45px;
}
#services-3 .service-box-4 .sb-icon i {
color: #ffffff;
font-size: 40px;
}
#services-3 .service-box-4 .sb-title {
margin-top: 20px;
}
#services-3 .service-box-4 .sb-title h5 {
color: #ffffff;
text-align: center;
text-transform: uppercase;
font-weight: 600;
font-size: 19px;
}
#services-3 .service-box-4 .sb-desc p {
color: #ffffff;
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<section id="services-3">
<div class="container-fluid">
<div class="row no-gutters">
<!-- Service 1 -->
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<div class="services-3-box-wrapper">
<div class="service-box-1">
<div class="sb-icon d-flex justify-content-center">
<i class="fas fa-user-md"></i>
</div>
<div class="sb-title">
<h5>Qualified Doctors</h5>
</div>
<div class="sb-desc">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
</div>
</div>
</div>
</div>
<!-- Service 2 -->
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<div class="services-3-box-wrapper">
<div class="service-box-2">
<div class="sb-icon d-flex justify-content-center">
<i class="fas fa-ambulance"></i>
</div>
<div class="sb-title">
<h5>Emergency Services</h5>
</div>
<div class="sb-desc">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
</div>
</div>
</div>
</div>
<!-- Service 3 -->
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<div class="services-3-box-wrapper">
<div class="service-box-3">
<div class="sb-icon d-flex justify-content-center">
<i class="fas fa-procedures"></i>
</div>
<div class="sb-title">
<h5>In-patient care</h5>
</div>
<div class="sb-desc">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
</div>
</div>
</div>
</div>
<!-- Service 4 -->
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<div class="services-3-box-wrapper">
<div class="service-box-4">
<div class="sb-icon d-flex justify-content-center">
<i class="fas fa-user-nurse"></i>
</div>
<div class="sb-title">
<h5>Friendly Staff</h5>
</div>
<div class="sb-desc">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Just add these 2 rule to your CSS and it will fix the issue.
.services-3-box-wrapper {
height: 100%;
}
div[class^="service-box"]{
height: 100%;
}
actually Flex child automatically have the equal height but to inner items you have to make it 100%, and your were doing the right thing, but you have to make sure that the div which you gave background color need to have that height 100% property and all above parents of it as well.
Check this working
#services-3 {
padding-top: 0px;
padding-bottom: 0px;
}
#services-3 .container-fluid {
padding-left: 0;
padding-right: 0;
}
#services-3 .service-box-1 {
background-color: #199adb;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 45px;
padding-right: 45px;
}
#services-3 .service-box-1 .sb-icon i {
color: #ffffff;
font-size: 40px;
}
#services-3 .service-box-1 .sb-title {
margin-top: 20px;
}
#services-3 .service-box-1 .sb-title h5 {
color: #ffffff;
text-align: center;
text-transform: uppercase;
font-weight: 600;
font-size: 19px;
}
#services-3 .service-box-1 .sb-desc p {
color: #ffffff;
text-align: center;
}
#services-3 .service-box-2 {
background-color: #5eb8e4;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 45px;
padding-right: 45px;
}
#services-3 .service-box-2 .sb-icon i {
color: #ffffff;
font-size: 40px;
}
#services-3 .service-box-2 .sb-title {
margin-top: 20px;
}
#services-3 .service-box-2 .sb-title h5 {
color: #ffffff;
text-align: center;
text-transform: uppercase;
font-weight: 600;
font-size: 19px;
}
#services-3 .service-box-2 .sb-desc p {
color: #ffffff;
text-align: center;
}
#services-3 .service-box-3 {
background-color: #199adb;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 45px;
padding-right: 45px;
}
#services-3 .service-box-3 .sb-icon i {
color: #ffffff;
font-size: 40px;
}
#services-3 .service-box-3 .sb-title {
margin-top: 20px;
}
#services-3 .service-box-3 .sb-title h5 {
color: #ffffff;
text-align: center;
text-transform: uppercase;
font-weight: 600;
font-size: 19px;
}
#services-3 .service-box-3 .sb-desc p {
color: #ffffff;
text-align: center;
}
#services-3 .service-box-4 {
background-color: #5eb8e4;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 45px;
padding-right: 45px;
}
#services-3 .service-box-4 .sb-icon i {
color: #ffffff;
font-size: 40px;
}
#services-3 .service-box-4 .sb-title {
margin-top: 20px;
}
#services-3 .service-box-4 .sb-title h5 {
color: #ffffff;
text-align: center;
text-transform: uppercase;
font-weight: 600;
font-size: 19px;
}
#services-3 .service-box-4 .sb-desc p {
color: #ffffff;
text-align: center;
}
.services-3-box-wrapper {
height: 100%;
}
div[class^="service-box"]{
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<section id="services-3">
<div class="container">
<div class="row no-gutters">
<!-- Service 1 -->
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<div class="services-3-box-wrapper">
<div class="service-box-1">
<div class="sb-icon d-flex justify-content-center">
<i class="fas fa-user-md"></i>
</div>
<div class="sb-title">
<h5>Qualified Doctors</h5>
</div>
<div class="sb-desc">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
</div>
</div>
</div>
</div>
<!-- Service 2 -->
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<div class="services-3-box-wrapper">
<div class="service-box-2">
<div class="sb-icon d-flex justify-content-center">
<i class="fas fa-ambulance"></i>
</div>
<div class="sb-title">
<h5>Emergency Services</h5>
</div>
<div class="sb-desc">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
</div>
</div>
</div>
</div>
<!-- Service 3 -->
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<div class="services-3-box-wrapper">
<div class="service-box-3">
<div class="sb-icon d-flex justify-content-center">
<i class="fas fa-procedures"></i>
</div>
<div class="sb-title">
<h5>In-patient care</h5>
</div>
<div class="sb-desc">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
</div>
</div>
</div>
</div>
<!-- Service 4 -->
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<div class="services-3-box-wrapper">
<div class="service-box-4">
<div class="sb-icon d-flex justify-content-center">
<i class="fas fa-user-nurse"></i>
</div>
<div class="sb-title">
<h5>Friendly Staff</h5>
</div>
<div class="sb-desc">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
example.
Related
I have the code below. My problem is that if I add too much text, it pushes down the entire row and the image has extra space underneath. How can I make sure that the image always fills out its container and its height adapts to the amount of content in the other column?
Here is an image in case the code snippet does not show exactly what I see.
I am using Bootstrap4.
.lesson-heading h2 {
font-size: 24px;
font-weight: 600;
}
.lesson {
background-color: #ffffff;
margin-top: 25px;
}
.lesson-img {
padding-left: 0px;
padding-right: 0px;
position: relative;
}
.trial-badge {
position: absolute;
background-color: green;
top: 10px;
left: 25px;
color: #ffffff;
font-size: 13px;
font-weight: 600;
padding: 3px 10px;
}
.lesson-content-header {
padding-top: 15px;
padding-right: 15px;
}
.lesson-content {
padding-bottom: 15px;
}
.lesson-title h4 a {
font-size: 22px;
font-weight: 600;
color: #333131;
text-decoration: none;
}
.lesson-title h4 a:hover {
color: #ed6310;
transition: .7s;
}
.lesson-status-completed i {
color: green;
}
.lesson-status-locked i, .lesson-status-new i {
color: #ccc;
}
.lesson-desc p {
font-size: 15px;
line-height: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="lesson">
<div class="row">
<div class="col-lg-4">
<div class="lesson-img">
<img src="https://cdn.pixabay.com/photo/2019/04/07/23/11/content-marketing-4111003__340.jpg" alt=""
class="img-fluid">
</div>
<div class="trial-badge">
<span>Trial</span>
</div>
</div>
<div class="col-lg-8 lesson-content">
<div class="lesson-content-header d-flex justify-content-between">
<div class="lesson-title">
<h4>This is the title of the lesson</h4>
</div>
<div class="lesson-status-completed"><i class="fas fa-check-circle"></i></div>
</div>
<div class="lesson-desc">
<p>This is the description of the lesson. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ullam aliquid nam adipisci in quae voluptate sunt fuga impedit. Ullam aliquid nam adipisci in
quae voluptate sunt fuga impedit. Ullam aliquid nam adipisci in quae voluptate sunt fuga
impedit.</p>
</div>
</div>
</div>
</div>
</div>
try this code:
.lesson-heading h2 {
font-size: 24px;
font-weight: 600;
}
.lesson {
background-color: #ffffff;
margin-top: 25px;
}
.lesson-img {
padding-left: 0px;
padding-right: 0px;
position: relative;
}
.trial-badge {
position: absolute;
background-color: green;
top: 10px;
left: 25px;
color: #ffffff;
font-size: 13px;
font-weight: 600;
padding: 3px 10px;
}
.lesson-content-header {
padding-top: 15px;
padding-right: 15px;
}
.lesson-content {
padding-bottom: 15px;
}
.lesson-title h4 a {
font-size: 22px;
font-weight: 600;
color: #333131;
text-decoration: none;
}
.lesson-title h4 a:hover {
color: #ed6310;
transition: .7s;
}
.lesson-status-completed i {
color: green;
}
.lesson-status-locked i, .lesson-status-new i {
color: #ccc;
}
.lesson-desc p {
font-size: 15px;
line-height: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="lesson">
<div class="row">
<div class="col-lg-4">
<div class="lesson-img h-100">
<img src="https://cdn.pixabay.com/photo/2019/04/07/23/11/content-marketing-4111003__340.jpg" alt=""
class="img-fluid h-100">
</div>
<div class="trial-badge">
<span>Trial</span>
</div>
</div>
<div class="col-lg-8 lesson-content">
<div class="lesson-content-header d-flex justify-content-between">
<div class="lesson-title">
<h4>This is the title of the lesson</h4>
</div>
<div class="lesson-status-completed"><i class="fas fa-check-circle"></i></div>
</div>
<div class="lesson-desc">
<p>This is the description of the lesson. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ullam aliquid nam adipisci in quae voluptate sunt fuga impedit. Ullam aliquid nam adipisci in
quae voluptate sunt fuga impedit. Ullam aliquid nam adipisci in quae voluptate sunt fuga
impedit.</p>
</div>
</div>
</div>
</div>
</div>
enter image description hereThis is the html code i have written for the index.html or home page. I have used sass code to compile it into the css . I tried everything i could find on the internet related to how to get rid of white space but nothing helped and i don't want to use sticky footer or keep its position set to fixed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css?family=Dosis&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/main.css" />
<title>John | UI/UX Designer & Photographer</title>
</head>
<body>
<!--header-->
<header id="header-home">
<div class="container">
<nav id="main-nav">
<h2>the deck</h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="header-content">
<h1>
I am John The
<span
class="txt-type"
data-wait="3000"
data-words='["Photographer", "Designer", "UI/UX Developer"]'
></span>
</h1>
<p class="lead">I specialize in UI and Photography</p>
View My Work
</div>
</div>
</header>
//These all the contents of the html page divided everything into sections A,B,C...respectively.
<!--SECTION A SPECIALIZE -->
<section id="home-a" class="text-center py-2">
<div class="container">
<h2 class="section-title">I SPECIALIZE IN</h2>
<div class="bottom-line"></div>
<p class="lead">
Photography as well as creating digital masterpieces and UI/UX layouts
for websites and mobile applications
</p>
<div class="specials">
<div>
<i class="fas fa-file-alt fa-2x"></i>
<h3>Concepting</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet
beatae, omnis ipsa voluptates labore aperiam placeat, nostrum
nulla alias dignissimos?
</p>
</div>
<div>
<i class="fas fa-desktop fa-2x"></i>
<h3>UI/UX</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet
beatae, omnis ipsa voluptates labore aperiam placeat, nostrum
nulla alias dignissimos?
</p>
</div>
<div>
<i class="fas fa-object-ungroup fa-2x"></i>
<h3>VISUAL DESIGN</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet
beatae, omnis ipsa voluptates labore aperiam placeat, nostrum
nulla alias dignissimos?
</p>
</div>
<div>
<i class="fas fa-thumbs-up fa-2x"></i>
<h3>INTERACTION</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet
beatae, omnis ipsa voluptates labore aperiam placeat, nostrum
nulla alias dignissimos?
</p>
</div>
</div>
</div>
</section>
<!--SECTION B STATS-->
<section id="home-b" class="text-center py-2">
<div class="stats">
<div>
<ul>
<li><i class="fas fa-users fa-3x"></i></li>
<li class="stats-title">Clients</li>
<li class="stats-numbers">100</li>
</ul>
</div>
<div>
<ul>
<li><i class="fas fa-award fa-3x"></i></li>
<li class="stats-title">Awards</li>
<li class="stats-numbers">3</li>
</ul>
</div>
<div>
<ul>
<li><i class="fas fa-hourglass-start fa-3x"></i></li>
<li class="stats-title">Hours Worked</li>
<li class="stats-numbers">3500</li>
</ul>
</div>
<div>
<ul>
<li><i class="fas fa-code-branch fa-3x"></i></li>
<li class="stats-title">Projects Completed</li>
<li class="stats-numbers">100</li>
</ul>
</div>
</div>
</section>
<!-- SECTION C MY CREATIVE PROCESS -->
<section id="home-c" class="text-center py-2">
<div class="container">
<h2 class="section-title">
MY CREATIVE PROCESS
</h2><div class="bottom-line"></div>
<p class="lead">All of my UI/UX and design projects are based off of a practiced
formula to get the result that I am looking for
</p>
<div class="process">
<div>
<i class="fas fa-file-alt fa-4x process-icon my-2">
<div class="process-step">1</div>
</i>
<div class="clear"></div>
<h3>DISCUSS THE PROJECT
</h3>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptate
earum quaerat itaque officia soluta?
</div>
<div>
<i class="fas fa-desktop fa-4x process-icon my-2">
<div class="process-step">2</div>
</i>
<div class="clear"></div>
<h3>BRAINSTORMING ^ CONCEPT
</h3>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptate
earum quaerat itaque officia soluta?
</div>
<div>
<i class="fas fa-object-ungroup fa-4x process-icon my-2">
<div class="process-step">3</div>
</i>
<div class="clear"></div>
<h3>UI/UX PLANNING
</h3>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptate
earum quaerat itaque officia soluta?
</div>
<div>
<i class="fas fa-thumbs-up fa-4x process-icon my-2">
<div class="process-step">4</div>
</i>
<div class="clear"></div>
<h3>INTERACTION
</h3>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptate
earum quaerat itaque officia soluta?
</div>
</div>
</div>
</section>
</div>
<!-- FOOTER -->
<footer id="main-footer">
<div class="footer-content container">
<p>Copyright © 2019. All Rights Reserved
</p>
<div class="social">
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin"></i>
</div>
</div>
</footer>
<script src="js/typewriter.js"></script>
</body>
</html>
I have used sass in the making of this website and all the code related to it is here.
#import "config";
#import "utilities";
#import "item_grid";
//GENERAL STYLES
* {
margin: 0;
padding: 0;
}
#main {
height: 100%;
}
body {
flex-direction: column;
margin: 0;
font-family: "Dosis", sans-serif;
line-height: 1.6;
}
a {
text-decoration: none;
color: $dark-color;
}
ul {
list-style: none;
}
h2,
h3,
h4 {
text-transform: uppercase;
}
img {
width: 100%;
}
//LOGO
#logo {
width: 70px;
height: 70px;
color: #fff;
text-transform: uppercase;
}
//MAIN NAV
#main-nav {
display: flex;
justify-content: space-between;
padding-top: 1rem;
ul {
display: flex;
}
li {
padding: 1rem 1.5rem;
}
a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
border-bottom: 3px transparent solid;
padding-bottom: 0.5rem;
transition: border-color 0.5s;
&:hover {
border-color: $medium-color;
}
&.current {
border-color: $main-color;
}
}
}
//HEADER
#header {
//HEADER HOME WHOLE
&-home {
background: $bg-image no-repeat center right / cover;
color: #fff;
//HEADER CONTENT
.header-content {
padding-top: 20%;
text-align: center;
h1 {
font-size: 4rem;
line-height: 1.2;
}
}
}
// HEADER INNER PAGES CONTENT
&-inner {
background: $bg-image no-repeat 20% 30% / cover;
height: 5.5rem;
border-bottom: 3px solid $main-color;
}
}
//HOME SECTIONS
#home {
//HOME SECTION A
&-a {
padding-top: 100px;
width: 100%;
height: 20rem;
.container {
padding-left: 0;
padding-right: 0;
}
.specials {
margin-top: 1rem 0;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(4, 1fr);
.fas {
color: $main-color;
padding-bottom: 0.8rem;
}
}
}
//HOME SECTION B
&-b {
height: 300px;
.container {
height: 100%;
padding: 0;
margin: 0;
}
.stats {
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
li {
padding-top: 2rem;
line-height: 1;
&.stats-title {
font-size: 2rem;
font-weight: bold;
}
&.stats-numbers {
font-size: 1.5rem;
font-weight: bold;
}
}
div {
padding: 2rem 0;
margin: 0;
&:nth-child(odd) {
background: $light-color;
}
&:nth-child(even) {
background: $medium-color;
}
}
}
}
&-c {
margin-top: 50px;
height: 500px;
.container {
padding-left: 0;
padding-right: 0;
}
.process {
display: grid;
grid-gap: 3rem;
grid-template-columns: repeat(4, 1fr);
text-align: center;
&-step {
position: absolute;
top: 0;
right: 0;
font-size: 28px;
background: $main-color;
border-radius: 50%;
height: 15px;
width: 15px;
line-height: 15px;
padding: 1rem;
transition: all 1s;
}
//PROCESS ICON
&-icon {
border-radius: 50%;
background: $dark-color;
color: #fff;
padding: 2rem;
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
position: relative;
transition: all 1s;
&:hover {
background: $main-color;
width: 90px;
height: 90px;
line-height: 90px;
.process-step {
background: $dark-color;
}
}
}
}
}
}
// FOOTER
#main-footer {
background: $dark-color;
color: #fff;
height: 6rem;
.footer-content {
display: flex;
justify-content: space-between;
height: 6rem;
align-items: center;
}
.social .fab {
margin: 1rem;
border: 2px #fff solid;
border-radius: 50%;
height: 20px;
width: 20px;
line-height: 20px;
text-align: center;
padding: 0.5rem;
&:hover {
background: $main-color;
}
}
}
config.scss code
//VARIABLES
$website-width:1280px;
$main-color:#ffbc00;
$light-color: #f4f4f4;
$medium-color:#ccc;
$dark-color:#333;
$bg-image:url('../images/main.jpg');
//SET TEXT COLOR FUNCTION
#function set-text-color($color) {
#if(lightness($color) > 50 ) {
#return #000 ;
}
#else {
#return #fff;
}
}
utilities.scss code :
.container {
max-width: $website-width;
height: 100vh;
padding: 0 350px;
margin: auto;
overflow: hidden;
}
//BUTTONS
%btn-shared {
display: inline-block;
padding: 0.8rem 2rem;
transition: all 0.5s;
border: none;
cursor: pointer;
}
.btn {
&-main {
#extend %btn-shared;
color: #333;
background-color: $main-color;
}
&-light {
#extend %btn-shared;
color: #333;
background-color: $light-color;
}
&-dark {
#extend %btn-shared;
color: #f4f4f4;
background-color: $dark-color;
}
}
button[class^='btn-']:hover,
a[class^='btn-']:hover,
input[class^='btn-']:hover {
background-color: $main-color;
}
// ABOUT BACKGROUNDS
.bg {
&-main {
background: $main-color;
color: set-text-color($main-color);
}
&-dark {
background: $dark-color;
color: set-text-color($dark-color);
}
&-light {
background: $light-color;
color: set-text-color($light-color);
}
&-medium {
background: $medium-color;
color: set-text-color($medium-color);
}
}
.lead {
font-size: 1.3rem;
margin-bottom: 2rem;
}
.text-center {
text-align: center;
}
//PADDING
.py {
&-1 {
padding: 1rem 0;
}
&-2 {
padding: 2rem 0;
}
&-3 {
padding: 3rem 0;
}
&-4 {
padding: 4rem 0;
}
}
//MARGIN
.my {
&-1 {
margin: 1rem 0;
}
&-2 {
margin: 2rem 0;
}
&-1 {
margin: 3rem 0;
}
&-1 {
margin: 4rem 0;
}
}
.section-title {
font-size: 2rem ;
display: block;
padding-bottom: 0.5rem;
text-align: center;
font-weight: 100;
text-transform: uppercase;
}
.bottom-line {
height: 2px;
width: 3rem;
background: $main-color;
display: block;
margin: 0 auto 1rem auto;
}
The code related to item_grid.scss is completely unrelated to this page. Thank you for the help.
Have you tried this :
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
I'm working on school project...So i'm building web site. But I have problem, after implementing laptop and lock simbol into HTML code CSS is ignoring any changes of float or margin in elements placed after those two simbols.. Any type of help will be apreachiated.
Whole project folder - Google drive link
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="stil.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Thasadith" rel="stylesheet">
</head>
<body>
<header>
<div class="container"> <img src="slike/glava.jpg" alt="Snow" style="width:100%;">
<div class="top-left">Logo</div>
<div class="top-right">
<div class="nav"> SERVICES PORTFOLIO ABOUT CONTACT </div>
</div>
<div class="centered">
<p>Welcome To Our Studio!</p>
<h1>IT'S NICE TO MEET YOU</h1>
<button onclick="myFunction()" id="myBtn">TELL ME MORE</button>
</div>
</div>
</header>
<div class="services">
<div class="main" id="section1"></div>
<h2>SERVICES</h2>
<h6>Lorem ipsum dolor sit amet consectetur.</h6>
<div class="services_slike">
<article> <span><i class="fas fa-laptop"> </i> </span>
<h3>Responsive Design</h3>
<h7>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</h7>
</article>
<article> <span> <i class="fas fa-lock"></i> </span>
<h3>Web Security</h3>
<h7>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</h7>
</article>
</div>
</div>
<div class="main" id="section2">
<h8>PORTFOLIO</h8>
</div>
<!--<div class="main" id="section3">
<h2>Section 1</h2>
<p>Click on the link to see the "smooth" scrolling effect.</p>
Click Me to Smooth Scroll to Section 2 Below
<p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>
<div class="main" id="section4">
<h2>Section 5</h2>
Click Me to Smooth Scroll to Section 1 Above
</div>-->
</body>
</html>
and CSS
#charset "utf-8";
top-right {
position: fixed;
top: 0;
width: 100%;
overflow: hidden;
background-color: #333;
}
nav {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
}
.nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-family: 'Lato', sans-serif;
}
.nav a:hover {
color: #E0CD36;
}
.nav a.active {
color: #E0CD36;
}
.container {
position: relative;
text-align: center;
color: white;
}
/* Top left text */
.top-left {
position: absolute;
top: 8px;
left: 150px;
font-family: 'Courgette', cursive;
font-size: 50px;
}
/* Top right text */
.top-right {
position: absolute;
top: 8px;
right: 130px;
float: right;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
headder {
width: 98%;
padding: 1%;
float: right;
}
button {
background-color: #FEC503;
padding: 2%;
color: white;
width: 25%;
border: none;
}
p {
font-family: 'Lato', sans-serif;
font-size: 50px;
}
h1 {
font-family: 'Lato', sans-serif;
font-size: 70px;
}
html {
scroll-behavior: smooth;
}
h2 {
text-align: center;
font-size: 50px;
font-family: 'Lato', sans-serif;
}
h6 {
font-size: 20px;
color: #777777;
text-align: center;
margin-top: -1%;
font-family: 'Thasadith', sans-serif;
}
span {
font-size: 100px;
margin-left: 28%;
}
h3 {
margin-left: 24%;
font-family: 'Lato', sans-serif;
}
h7 {
color: #777777;
margin-top: -1%;
text-align: center;
}
article {
width: 30%;
float: left;
margin-left: 15%;
}
h8 {
font-family: 'Lato', sans-serif;
margin-top: 10px;
font-size: 50px;
}
.services_slike {
width: 100%;
}
Look, in your html code in blocks article there element have h7. HTML didn't have that element. It has only h1, h2, h3, h4, h5 and h6. Here is right code.
<article> <span><i class="fas fa-laptop"> </i> </span>
<h3>Responsive Design</h3>
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</h6>
</article>
<article> <span> <i class="fas fa-lock"></i> </span>
<h3>Web Security</h3>
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</h6>
</article>
Am I right understand you?
From Float on w3school for no float you can set none for float.
example :float: none;
and same as float, you can set none for every margin
margin-left:none;
if is not set for you, you can set !important for that style.
I have a little problem with bootstrap, I test lot of possibility for resolve my problem, but I dont found the good..
I have a footer. The footer is in the container for align with the bootstrap grid. I would like to put the width contact block at 100% at the right.Currently it is blocked against the container.
the block are perfectly align, i have just this problem
Curently:
Final result :
(See my code in full view)
#charset 'UTF-8';
#import url('https://fonts.googleapis.com/css?family=Lato:300,400,900|Merriweather:400,400i,700i');
.accompagnement {
height: 550px;
background: #fafafa;
}
.accompagnement__titre {
font-family: Merriweather, serif;
font-size: 30px;
font-weight: 400;
line-height: 240px;
position: relative;
color: #aba08c;
}
.accompagnement__titre:after {
position: absolute;
right: 40%;
bottom: 70px;
width: 200px;
height: 1px;
content: ' ';
background: #aba08c;
}
.accompagnement__informations {
background: white;
background-clip: content-box;
}
.accompagnement__image {
width: 100%;
height: 210px;
background: url('../assets/img/spot-of-light-1145368.jpg') no-repeat center center;
}
.accompagnement__texte {
line-height: 26px;
padding: 30px 30px;
}
.accompagnement__texte > h2 {
font-size: 24px;
color: #8b3d61;
}
.accompagnement__texte > p {
font-weight: 300;
}
.valign {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.set-relative {
position: relative;
}
.svg-button {
/**
Gestion du :Hover des SVG
*/
}
.svg-button-gauche,
.svg-button-droite {
position: absolute;
top: 50%;
width: 46px;
height: 46px;
fill: #5e5f78;
}
.svg-button-gauche {
left: -60px;
}
.svg-button-droite {
right: -60px;
}
.svg-button-fleche {
fill: none;
stroke: #ccc;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2px;
}
.svg-button-contour {
fill: #ccc;
}
.svg-button-gauche:hover .svg-button-fleche,
.svg-button-droite:hover .svg-button-fleche {
stroke: red;
}
.svg-button-gauche:hover .svg-button-contour,
.svg-button-droite:hover .svg-button-contour {
fill: red;
}
footer {
position: relative;
background: #e5e3e8;
}
footer ul {
margin: 50px 0 140px 0;
color: #5e5f78;
}
footer ul li {
font-weight: 300;
line-height: 25px;
}
footer ul li:first-child {
font-family: Merriweather, serif;
font-weight: 400;
line-height: 30px;
}
footer ul li a {
text-decoration: none;
color: inherit;
}
footer ul li a:hover {
color: inherit;
}
.footer {
font-size: 13px;
font-weight: 300;
padding: 30px 0;
color: #5e5f78;
border-top: 1px solid #fff;
}
.footer__copyright {
padding-left: 0;
}
.footer__appolo {
padding-right: 0;
text-align: right;
}
.footer__appolo > a {
display: inline-block;
text-decoration: none;
color: #5e5f78;
}
.footer__appolo > a:first-child:after {
margin: 0 15px;
content: '•';
}
.contacts {
position: absolute;
top: -20px;
right: 0;
height: 409px;
background: #fff;
background-clip: content-box;
}
.contacts > h2 {
font-family: Merriweather, serif;
font-size: 30px;
line-height: 30px;
position: relative;
margin-bottom: 55px;
color: #aba08c;
}
.contacts > h2:after {
position: absolute;
bottom: -30px;
left: 0;
width: 300px;
height: 1px;
content: ' ';
background: #aba08c;
}
.contacts__tel {
font-weight: 300;
line-height: 30px;
margin: 0 0 50px 0;
}
.contacts__permanence,
.contacts__disponibilite,
.contacts__lieu {
font-family: Merriweather, serif;
font-size: 14px;
font-weight: 400;
line-height: 30px;
margin: 0;
}
.contacts__adresse {
font-size: 14px;
font-weight: 300;
line-height: 20px;
margin: 0;
color: #5e5f78;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<section class="container-fluid accompagnement">
<div class="container">
<div class="row">
<div class="container">
<div class="row set-relative">
<div class="col-lg-4 accompagnement__informations">
<div class="accompagnement__image"></div>
<div class="accompagnement__texte">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis dignissimos fuga nobis, nulla, pariatur, quia quisquam reiciendis repellendus tempore vero voluptas voluptate voluptatibus. Alias ducimus impedit nostrum reprehenderit ut!</p>
</div>
</div>
<div class="col-lg-4 accompagnement__informations">
<div class="accompagnement__image"></div>
<div class="accompagnement__texte">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur doloribus ducimus eveniet molestiae? Amet delectus, distinctio harum incidunt, laborum libero minima minus molestias quam repudiandae suscipit ut veniam voluptatum.</p>
</div>
</div>
<div class="col-lg-4 accompagnement__informations">
<div class="accompagnement__image"></div>
<div class="accompagnement__texte">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores cumque eligendi expedita id itaque minus modi neque nostrum odio omnis provident quam quas quasi quisquam ratione repellendus, sapiente similique voluptas.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Menu</li>
<li>SubMenu</li>
<li>SubMenu</li>
<li>SubMenu</li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Menu</li>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Menu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Menu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</div>
</div>
<div class="row footer">
<p class="col-lg-6 footer__copyright">© 2017 Company</p>
<div class="col-lg-6 footer__appolo">
Plan
</div>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-lg-12 contacts">
<h2>Contacts</h2>
<p class="contacts__permanence">Blablabla</p>
<p class="contacts__disponibilite">Blablabla</p>
<p class="contacts__tel">Blablabla</p>
<p class="contacts__lieu">Blablabla</p>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
Thanks
If your block is inside a .container, you can't expand it outside the container, unless you make it position:absolute or something like this.
You could also change the .container in the footer into a .container-fluid, and then create 2 blocks inside for placing.
.container is made to be centered on devices > "xs".
I'm using Bootstrap to create a one page website but when I re-size the page down to mobile size content starts to overlap and I have never experienced this while using bootstrap here is what is happening:
Here is my main html file:
<!DOCTYPE html>
<html>
<head>
<!-- Meta charset
===================================================================================-->
<meta charset="utf-8">
<!-- Title
===================================================================================-->
<title>#######</title>
<!-- Meta Tags
===================================================================================-->
<meta name="author" content="Thomas Withers">
<meta name="description" content="Social Media Wizzards that handle all of your social media markerting.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- CSS Stylesheets
===================================================================================-->
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/Custom.css" rel = "stylesheet">
<link href="css/animate.css"rel="stylesheet">
<link rel="shortcut icon" href="img/iceBox.png">
<!-- Custom Fonts
===================================================================================-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation <a class="navbar-brand page-scroll" href="#page-top"><img src="img/logo2.png"></a>
======================================================================================= -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<img alt="Brand" src="img/logo.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Header
=================================================================================== -->
<header>
<div class="headerMain">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-text">
<h1>#######</h1>
<hr>
<h2>BlahBlah This is a place holder</h2>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- About Us
===================================================================================-->
<section id="section-one" class="section-one">
<div class="container">
<div class="row">
<div class="col-lg-6 vline">
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
</div>
<div class="col-lg-6">
<h3>Other Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
</div>
</div>
</div>
</section>
<section id="section-two" class="section-two">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3>Who are we?</h3>
</div>
<div class="col-lg-6">
<img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt="">
<h4>#######</h4>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
</div>
<div class="col-lg-6">
<img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt="">
<h4>#######</h4>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
</div>
<div class="col-lg-6">
<img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt="">
<h4>#######</h4>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
</div>
<div class="col-lg-6">
<img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt="">
<h4>#######</h4>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
</div>
<div class="col-lg-6">
<img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt="">
<h4>#######</h4>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
</div>
<div class="col-lg-6">
<img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt="">
<h4>Paresh Parmar</h4>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
</div>
</div>
</div>
</section>
<!-- Services
===================================================================================-->
<section id="section-three" class="section-three">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Section Three</h1>
</div>
</div>
<div id="map">
</div>
</div>
</section>
<!-- Contact Form
===================================================================================-->
<section id="section-four" class="section-four">
<div class="container">
<div class="row col-md-1">
</div>
</div>
</section>
<!-- footer
==================================================================================-->
<footer class="footer-distributed">
<div class="footer-left">
<img src="img/logo.png"/>
<br>
<br>
<p class="footer-company-name">Ice7Media © 2015</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p><span>102 Colmore Row</span> Bimringham, England</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p>+44 121 227 2681</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p>support#ice7media.com</p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>About the company</span>
Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.</p>
<div class="footer-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
</div>
</div>
</footer>
<!-- Scripts
===================================================================================-->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
</body>
</html>
/*!
Main Page CSS || Created By Thomas Withers # Ice7Media
*/
/* Global Styles
============================================================ */
body {
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
}
html {
width: 100%;
height: 100%;
}
h1,
h2,
h3,
h4,
h5 {
font-family: 'Oswald', 'Open Sans', sans-serif;
}
p {
font-family: 'Open Sans', sans-serif;
}
/* Navbar Style
============================================================ */
#media(min-width:767px) {
.navbar {
padding: 20px 0;
background-color: #474747;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
.navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-nav > li > a{
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 100;
letter-spacing: 3px;
text-transform: uppercase;
color: #fff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #000;
}
/* Header
=======================================================*/
.headerMain{
background-image: url(../img/Bimringham-Skyline.jpeg);
background-size: cover;
padding-top: 100px;
padding-bottom: 215px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
.headOther{
margin-top: -25px;
text-align: center;
background-color: #23282d;
padding-top: 100px;
padding-bottom: 575px;
}
header h1 {
display: block;
text-align: center;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-size: 2.5em;
font-weight: 600;
color: #fff;
}
hr {
display: block;
text-align: center;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-width: 1px;
border-color: #fff;
}
header h2 {
text-align: center;
font-family: 'Oswald', sans-serif;
font-size: 1.5em;
font-weight: 500;
color: #fff;
}
/* Section Formatting
======================================================== */
.section-one {
height: 40%;
padding-top: 50px;
text-align: center;
background: #6d6d6d;
}
#section-one h2, h3, h4, p {
color: #fff;
}
.vline:nth-of-type(1){
border-right: 2px solid #474747;
}
.img-center {
margin: 0 auto;
}
.section-two {
height: 110%;
padding-top: 50px;
text-align: center;
background: #6d6d6d;
}
.section-three {
height: 100%;
padding-top: 250px;
text-align: center;
background: #ebebeb;
}
.section-four {
height: 100%;
padding-top: 250px;
text-align: center;
background: #6d6d6d;
}
/* Footer Formatting
==============================================================*/
.footer-distributed{
background-color: #292c2f;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px 'Open Sans';
padding: 55px 50px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: inline-block;
vertical-align: top;
}
/* Footer left */
.footer-distributed .footer-left{
width: 40%;
}
/* The company logo */
.footer-distributed h3{
color: #ffffff;
font-family: 'Oswald', sans-serif;
font: normal 36px 'Open Sans', sans-serif;
margin: 0;
}
.footer-distributed h3 span{
color: #5383d3;
}
/* Footer links */
.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
padding: 0;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}
/* Footer Center */
.footer-distributed .footer-center{
width: 35%;
}
.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
}
.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}
.footer-distributed .footer-center p a{
color: #5383d3;
text-decoration: none;;
}
/* Footer Right */
.footer-distributed .footer-right{
width: 20%;
}
.footer-distributed .footer-company-about{
line-height: 20px;
color: #92999f;
font-size: 13px;
font-weight: normal;
margin: 0;
}
.footer-distributed .footer-company-about span{
display: block;
color: #ffffff;
font-size: 14px;
font-weight: bold;
margin-bottom: 20px;
}
.footer-distributed .footer-icons{
margin-top: 25px;
}
.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}
/* Responsive Footer */
#media (max-width: 880px) {
.footer-distributed{
font: bold 14px 'Open Sans';
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}
.footer-distributed .footer-center i{
margin-left: 0;
}
}
footer-icons i.fa-twitter:hover {
color: #55acee;
}
footer-icons i.fa-linkedin:hover {
color: #0077b5;
}
footer-icons i.fa-facebook:hover {
color: #3b5998;
}
Any help is much appreciated
Thanks in advance
Tom
Fixed I think:
/* Section Formatting
======================================================== */
.section-one {
padding-top: 50px;
text-align: center;
background: #6d6d6d;
}
#section-one h2, h3, h4, p {
color: #fff;
}
.vline:nth-of-type(1){
border-right: 2px solid #474747;
}
.img-center {
margin: 0 auto;
}
.section-two {
padding-top: 50px;
text-align: center;
background: #6d6d6d;
}
.section-three {
height: 100%;
padding-top: 250px;
text-align: center;
background: #ebebeb;
}
.section-four {
height: 100%;
padding-top: 250px;
text-align: center;
background: #6d6d6d;
}
be careful giving your .section classes height larger than 100%