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%
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 made a second background image but no matter what elements I change it doesn't seem like I can position it at all. On top of that when I go into Chrome and use inspect then remove the layer it doesn't disappear?
And another problem I'm having is trying to figure out what code I need to change to get everything centered in the page layout. Like do I just have the numbers wrong or something?
If anyone could help me out I would be super grateful.
My Code:
/*The Main Background*/
body {
background-image: url(../img/background.png);
background-repeat: repeat-x
}
#HeaderBike {
background-image: url(..img/HeaderBike.png);
background-repeat: no-repeat;
z-index: 1;
float: left;
position: absolute height: 155px;
width: 155px;
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
text-align: center;
}
/* Nav Element */
/*The Search Bar */
form div {
/*Margin Header */
48px;
float: left;
}
.site-navigation {
height: 155px;
}
.site-navigation img {
margin-top: 16px;
float: left;
}
.site-navigation ul {
width: 600px;
margin: 0 auto;
}
.site-navigation li {
margin: 35px 33px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* Header Element */
h2 {
line-height: 0.8;
font-size: 72px;
font-weight: bold;
color: #fff;
width: 450px;
margin: left;
margin-top: 115px;
padding-bottom: 42px;
float: left;
text-align: left;
}
h1 {
text-align: left;
}
.SearchGlass {
margin: -142px 900px;
float: left;
}
/* Class For Articles*/
.article {
float: left;
width: 100%;
margin-bottom: 72px
}
.article img {
width: 20%;
margin-right: 1%
}
.article h1 {
float: left;
width: 70%;
margin: 5px 0;
text-align: left;
font-weight: bold;
font-size: 22.5px;
}
.article p {
float: left;
width: 70%;
margin: 5px 0;
text-align: left;
font-weight: bold;
font-size: 12px;
}
footer {
display: block;
width: 100%;
float: left;
}
.search {
margin: -141px 1125px;
float: left;
}
.RoadToYellow {}
<div class="container">
<header class="Team Sky">
<nav class="site-navigation">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo">
<ul class="clearfix">
<li>shop</li>
<li>checkout</li>
<li>video</li>
<li>
</div>
</ul>
<div class="SearchGlass" id="SearchGlass">
<img src="img/magnifyingglass.png" alt="Magnifying Glass">
</div>
<form>
<div class="search">
<input id="search" type="text" name="search" placeholder="search"><br>
</div>
<div id="HeaderBike">
<img src="img/HeaderBike.png" alt="Dude on a bike">
</div>
</nav>
</form>
<div class="TeamSkylogo">
<h2>Team Sky</h2>
</div>
<div class="RoadToYellow">
<P>the road to yellow</P>
</div>
<!--Shop Team Sky!-->
<main>
<h1> TEAM NEWS </h1>
<!-- each article/blog should be in it's own container -->
<div class="article">
<img src="img/ArticleImageOne.png" alt="Water">
<h1>Giro d'Italia</h1>
<P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
<!--readon !-->
</div>
<div class="article">
<img src="img/ArticleImageTwo.png" alt="Bikes by River">
<h1>Krudder Gets a Break</h1>
<P>The powerful German who was a rock in the beginning of the season will now get a break from and is expected to return for the Malecour at the end of the season</P>
<!--readon !-->
</div>
<div class="article">
<img src="img/ArticleImageThree.png" alt="Bike Dudes Biking">
<h1>Kinnick's New Contract</h1>
<P>Peter Kinnick contract is still not settled with the team manager Alistar McDowell saying that a new contract offer has been made</P>
<!--readon !-->
</div>
<div class="article">
<img src="img/ArticleImageFour.png" alt="Single Guy On Bike">
<h1>Froom In Third</h1>
<P>Chris Froom Finished Third in the opening prologue stage at the Criterium du Dauphine with a strong showing on the first day</P>
<!--readon !-->
</div>
</main>
<footer>
<img src="img/sponsor1.png" alt="Team Sky Sponsor">
<img src="img/sponsor2.png" alt="Pinarello">
<img src="img/sponsor3.png" alt="Shimano">
<img src="img/sponsor4.png" alt="Rayha">
<img src="img/sponsor5.png" alt="21ST Century Fox">
</footer>
</div>
What its suppose to look like
Vs.
What Mine Looks Like
Try using: background-size: cover;
What this will do is amplify the image enough so it covers the container is in.
Also, if you want to center the image you can use: background-position: center;
At the end it would look something like this:
#HeaderBike {
background-image: url(..img/HeaderBike.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
z-index: 1;
float: left;
position: absolute height: 155px;
width: 155px;
}
Or more simplified:
#HeaderBike {
background: url(..img/HeaderBike.png) no-repeat cover center;
z-index: 1;
float: left;
position: absolute height: 155px;
width: 155px;
}
Different approach (with flexbox)
Structure HTML
<!-- Header with logo, links and search -->
<header></header>
<!-- Intro section -->
<section></section>
<!-- Main with images and articles -->
<main></main>
<!-- Footer with customers and navigation -->
<footer></footer>
Think in sections, columns and rows.
<div class="section>
<div class="row">
<div class="column"></div>
</div>
</div>
Be consistent!
Give each section the padding you want. Make a row with
.row {
display: flex;
}
and a column with
.column {
flex: 1
}
so that every column has the same width.
Center horizontally and vertically as follows:
/* Center vertically */
.v-centered {
align-items: center;
}
/* Center horizontally */
.centered {
justify-content: center;
}
Example
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
}
a {
text-decoration: none;
}
.text-center {
text-align: center;
}
header {
background: #49B2CB;
}
header a {
color: white;
}
.container {
max-width: 960px;
margin: 0 auto;
border: 1px solid;
}
.section {
padding: 3rem 1.5rem;
}
/* Make header and footer padding not as big as normal */
header.section,
footer.section {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
/* Row, centering, wrapping */
.row {
display: flex;
margin: 0 -0.75rem;
}
.row.v-centered {
align-items: center;
}
.row.centered {
justify-content: center;
}
.row.wrap {
flex-wrap: wrap;
}
.row>.column {
flex: 1;
}
.row>* {
padding: 0.75rem;
}
/* Navigation */
ul.nav {
padding: 0;
margin: 0;
list-style: none;
}
ul.nav li {
float: left;
padding: 5px;
}
ul.nav a {
color: #797979;
}
/* Buttons */
.btn {
text-decoration: none;
display: inline-block;
padding: 0.5rem;
border-radius: 0.5rem;
color: white;
}
.btn.light {
background: #49B2CB;
}
.btn.dark {
background: #000000;
}
/* Intro */
.intro {
background-image: url(http://lorempixel.com/960/400/sports/1);
color: white;
text-align: center;
}
.intro h1 {
font-size: 3rem;
margin: 0;
}
/* Main */
main h2 {
margin: 0.5rem 0;
}
/* Make main images responsive */
main img {
display: block;
height: auto;
max-width: 100%;
}
/* Footer */
footer figure {
margin: 0;
}
footer .nav {
text-align: center;
}
#media screen and (max-width: 767px) {
main .row {
flex-direction: column;
}
}
<div class="container">
<header class="section">
<div class="row v-centered centered">
<div class="column"><img src="http://via.placeholder.com/200x50?text=TEAM-SKY" alt=""></div>
<div class="column text-center">shop</div>
<div class="column text-center">checkout</div>
<div class="column text-center">video</div>
<div class="column"><input type="text" placeholder="Search ..."></div>
</div>
</header>
<section class="section intro">
<div class="row v-centered">
<div>
<h1>Team Sky</h1>
<p>the road to yellow</p>
shop team sky
</div>
</div>
</section>
<main class="section">
<h2>TEAM NEWS</h2>
<div class="row">
<div class="column"><img src="http://via.placeholder.com/400x200" alt="">
</div>
<div class="column">
<article>
<h3>Heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat eligendi voluptas voluptate ut distinctio aspernatur perferendis minima, repellendus consequatur, incidunt, velit ipsum est suscipit veniam fugiat tempora, rem dolore! Commodi?</p>
More
</article>
</div>
</div>
<div class="row">
<div class="column"><img src="http://via.placeholder.com/400x200" alt="">
</div>
<div class="column">
<article>
<h3>Heading 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, reiciendis dolor nulla maiores! Eaque quaerat quas optio quam odio inventore totam odit nobis blanditiis facere iure rem, praesentium et similique.</p>
More
</article>
</div>
</div>
<div class="row">
<div class="column"><img src="http://via.placeholder.com/400x200" alt="">
</div>
<div class="column">
<article>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore illo mollitia consequatur laborum nulla, eos incidunt iusto explicabo voluptate molestias dolorum dolores, at, dolor temporibus ex tenetur quaerat, ducimus sequi.</p>
More
</article>
</div>
</div>
<div class="row">
<div class="column"><img src="http://via.placeholder.com/400x200" alt="">
</div>
<div class="column">
<article>
<h3>Heading 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit impedit amet odio quaerat sit voluptates aut quisquam tempore ipsa repellat ipsam atque deserunt, quis voluptatum quos aliquid laudantium dolorum accusamus.</p>
More
</article>
</div>
</div>
</main>
<footer class="section">
<div class="row centered wrap">
<figure><img src="http://via.placeholder.com/100x50?text=Customer 1" alt="">
</figure>
<figure><img src="http://via.placeholder.com/150x50?text=Customer 2" alt="">
</figure>
<figure><img src="http://via.placeholder.com/75x50?text=Customer 3" alt="">
</figure>
<figure><img src="http://via.placeholder.com/100x50?text=Customer 4" alt="">
</figure>
<figure><img src="http://via.placeholder.com/200x50?text=Customer 5" alt="">
</figure>
</div>
<div class="row centered">
<ul class="nav">
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>Link 4
</li>
<li>Link 5
</li>
</ul>
</div>
</footer>
</div>
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".