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.
Related
I am new at HTML and want to know how to fix the position of my elements in a window because every time I try to minimize the window everything becomes messy. I am about to make a website and this is my first try so bear with errors. Here's my code:
body,
html {
background-color: #cc9966;
max-height: 100%;
max-width: 100%;
}
.Container {
width: 100%;
min-width: 700px;
margin: auto;
position: relative;
}
.title {
font-family: Lucida handwriting;
font-size: 4rem;
text-align: center;
color: white;
text-shadow: 1rem 1rem 5rem black;
}
header .choice a {
padding: .8rem;
font-family: Arial;
font-size: 1rem;
border: solid rgba(57, 38, 19);
background: #f9f2ec;
color: black;
margin-left: 3rem;
cursor: pointer;
border-radius: 1rem;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=content-width, initial-scale=1.0">
<title> WEBSITE OF LB21 </title>
<link rel="stylesheet" href="LB21.css">
</head>
<body>
<div class="Container">
<div class=title>
<h2> LUSCIOUS BITES </h2>
</div>
<center>
<p class="choice">
HOME
SPECIALITY
POPULAR
GALLERY
REVIEW
ORDER
</p>
</center>
</header>
<section class="home" id="home">
<div class="content">
<h3>food made with love</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas accusamus tempore temporibus rem amet laudantium animi optio voluptatum. Natus obcaecati unde porro nostrum ipsam itaque impedit incidunt rem quisquam eos!</p>
order now
</div>
<div class="image">
<img src="images/home-img.png" alt="">
</div>
</section>
</div>
</body>
The image below shows the issues I'm having:
body,
html {
background-color: #cc9966;
max-height: 100%;
max-width: 100%;
}
.Container {
width: 100%;
min-width: 700px;
max-height: 1000px;
margin: auto;
position: relative;
}
.title {
font-family: Lucida handwriting;
font-size:calc(34px + 2.2vw);
text-align: center;
color: white;
text-shadow: 1rem 1rem 5rem black;
}
header {
padding: .8rem;
font-family: Arial;
font-size: 1rem;
border: solid rgba(57, 38, 19);
background: #f9f2ec;
color: black;
margin-left: 3rem;
cursor: pointer;
border-radius: 1rem;
position: relative;
}.choice {
display: flex;
justify-content: space-evenly;
max-width: 900px
}
.choice a {
padding: .8rem;
font-family: Arial;
font-size: 1rem;
border: solid rgba(57, 38, 19);
background: #f9f2ec;
color: black;
cursor: pointer;
border-radius: 1rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=content-width, initial-scale=1.0">
<title> WEBSITE OF LB21 </title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="Container">
<div class=title>
<h2> LUSCIOUS BITES </h2>
</div>
<center>
<p class="choice">
HOME
SPECIALITY
POPULAR
GALLERY
REVIEW
ORDER
</p>
</center>
<section class="home" id="home">
<div class="content">
<h3>food made with love</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas accusamus tempore temporibus rem amet laudantium animi optio voluptatum. Natus obcaecati unde porro nostrum ipsam itaque impedit incidunt rem quisquam eos!</p>
order now
</div>
<div class="image">
<img src="images/home-img.png" alt="">
</div>
</section>
</div>
</body>
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%;
}
This question already has answers here:
CSS - Equal Height Columns?
(11 answers)
Closed 2 years ago.
I have 3 columns in my footer (f-box). I want them to have equal height. I don't want to use flexbox for this one. I am trying to achieve the result using - display:table on my container of the boxes and make display:table-cell for every box. But it doesn't work. Why? How to do it with this display: table method
#import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600;700;800&family=Quantico:wght#400;700&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Open Sans", sans-serif;
line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Quantico", sans-serif;
margin-bottom: 20px;
}
p {
font-size: 15px;
color: #666;
line-height: 26px;
margin-bottom: 15px;
}
a {
font-family: "Quantico", sans-serif;
text-decoration: none;
color: #111;
}
ul {
list-style: none;
}
img {
width: 100%;
display: block;
}
/* Theme */
.container {
margin: auto;
max-width: 1500px;
padding: 0 15px;
}
.logo {
font-size: 30px;
padding: 20px 0;
float: left;
margin: 0;
}
.main-color {
color: #009603;
}
.btn {
display: inline-block;
text-transform: uppercase;
background: #009603;
color: #fff;
padding: 14px 30px;
font-weight: 700;
}
/* Nav */
nav {
overflow: hidden;
text-transform: uppercase;
}
nav ul {
float: right;
}
nav ul li {
float: left;
margin-right: 32px;
position: relative;
}
nav ul li a {
display: block;
padding: 31px 8px;
font-weight: 700;
}
nav ul li a:after {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: #009603;
content: "";
opacity: 0;
transition: all 0.3s;
}
nav ul li.active a:after {
opacity: 1;
}
nav ul li:hover > a:after {
opacity: 1;
}
/* Showcase */
#showcase {
background: url("../img/bg.jpg") no-repeat center center/cover;
height: 900px;
}
#showcase .showcase-content {
color: #fff;
text-align: center;
padding-top: 300px;
}
#showcase .showcase-content h2 {
font-size: 60px;
font-weight: 700;
text-transform: uppercase;
}
#showcase .showcase-content p {
margin-bottom: 30px;
line-height: 30px;
color: #fff;
}
/* Features */
#features {
padding-bottom: 60px;
}
#features .container {
margin-top: -70px;
max-width: 1400px;
overflow: hidden;
}
#features .box {
background: #fff;
float: left;
max-width: 30%;
margin: 0 15px 30px 15px;
padding: 10px 10px 18px 10px;
box-shadow: 0px 10px 25px rgba(206, 206, 206, 0.5);
text-align: center;
}
#features .box img {
margin-bottom: 28px;
}
#features .box h3 {
color: #191039;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 10px;
font-size: 30px;
}
/* Footer */
footer {
padding-top: 70px;
overflow: hidden;
background-color: #000;
}
footer .container {
max-width: 1400px;
display: table;
}
footer .f-box {
display: table-cell;
float: left;
max-width: 33.3%;
margin-bottom: 30px;
padding: 0 15px;
}
footer .logo {
padding-top: 0;
color: #fff;
text-transform: uppercase;
float: none;
}
footer p {
color: #c4c4c4;
margin-bottom: 20px;
}
footer .social i {
color: #fff;
margin-right: 20px;
}
footer h5 {
color: #fff;
text-transform: uppercase;
font-size: 20px;
font-weight: 700px;
margin-bottom: 35px;
padding-top: 5px;
}
footer img {
float: left;
width: calc(33.33% - 5px);
margin-right: 5px;
}
footer form {
position: relative;
}
footer input {
width: 100%;
height: 50px;
font-size: 15px;
color: #c4c4c4;
padding-left: 20px;
border: 1px solid #009603;
background: transparent;
}
footer form button {
font-size: 18px;
color: #fff;
background: #009603;
height: 50px;
width: 50px;
border: none;
position: absolute;
right: 0;
top: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pacocha | Garden Projects</title>
<link rel="stylesheet" href="css/style.css" />
<script
src="https://kit.fontawesome.com/1685e275a4.js"
crossorigin="anonymous"
></script>
</head>
<body>
<header>
<nav>
<div class="container">
<a href="index.html">
<h1 class="logo"><i class="fas fa-leaf main-color"></i> Pacocha</h1>
</a>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div>
</nav>
<div id="showcase">
<div class="container">
<div class="showcase-content">
<h2>Garden Projects</h2>
<p>
We have the best home improvement projects, expert advice, and DIY
home improvement ideas for your home. <br />
You can create your dream home with smart planning and the right
home improvement contractors.
</p>
About Us
</div>
</div>
</div>
</header>
<!-- Features -->
<section id="features">
<div class="container">
<div class="box">
<img src="img/feat1.jpeg" alt="" />
<h3>Gardening</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores
magnam reprehenderit aspernatur neque nam ipsum enim, vitae minus
totam voluptates.
</p>
</div>
<div class="box">
<img src="img/feat2.jpg" alt="" />
<h3>Decorating</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores
magnam reprehenderit aspernatur neque nam ipsum enim, vitae minus
totam voluptates.
</p>
</div>
<div class="box">
<img src="img/feat3.jpg" alt="" />
<h3>Ideas</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores
magnam reprehenderit aspernatur neque nam ipsum enim, vitae minus
totam voluptates.
</p>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="f-box">
<h1 class="logo"><i class="fas fa-leaf main-color"></i> Pacocha</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione
corporis nostrum ex perferendis! Adipisci, molestias.
</p>
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="f-box">
<h5>Instagram</h5>
<img src="img/insta1.jpg" alt="" />
<img src="img/insta2.jpg" alt="" />
<img src="img/insta3.jpg" alt="" />
</div>
<div class="f-box">
<h5>Subscribe</h5>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Necessitatibus, vel?
</p>
<form action="">
<input type="email" placeholder="Email" />
<button type="submit"><i class="fa fa-send"></i></button>
</form>
</div>
</div>
</footer>
</body>
</html>
you just need this css
footer {
padding: 70px 0;
}
footer .f-box {
display: table-cell;
float: none;
width: 33.3%;
margin-bottom: 30px; /*the margin property is not applicable to display:table-cell elements.*/
padding: 0 15px;
}
and it will behave like this - equal column height
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%