I have a card in which there is button (Start button) which won't go to the center of the card.
I tried center-align class, but that won't do it. I also tried using my id and class and trying text-align: center; in my css. But that did not work either.
Don't know what I'm missing.
Here is what I have:
This is what I want:
Here is the full html:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!--navbar-->
<header>
<nav>
<div class="nav-wrapper light-blue darken-3">
Kviz
<!--
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li>test</li>
</ul>
-->
</div>
</nav>
</header>
<main>
<div class="row">
<div class="col s12 m12 l6 xl6">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="images/kvizslika.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Kako se radi kviz ?
<a class="waves-effect light-blue darken-3 btn activator right">Instrukcije</a>
</span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Instrukcije<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
<div class="card-tabs">
<ul class="tabs tabs-fixed-width">
<li class="tab"><a class="active" href="#korak1">Poeni</a></li>
<li class="tab">Odgovori</li>
<li class="tab">Vreme</li>
</ul>
</div>
<div class="card-content grey lighten-4">
<div id="korak1">Test 1. Bla bla. <br/> Bla bla.</div>
<div id="korak2">Test 2</div>
<div id="korak3">Test 3</div>
</div>
</div>
</div>
</div>
<div class="col s12 m12 l6 xl6">
<div class="card">
<div class="row">
<div class="col s12 m12">
<div class="card light-blue darken-3">
<div class="card-content white-text">
<span class="card-title naslovPrijava">Prijava</span>
</div>
</div>
</div>
<div class="col s12 m12">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 1:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name" type="text" class="validate">
<label for="first_name">Ime</label>
</div>
<div class="input-field">
<input id="last_name" type="text" class="validate">
<label for="last_name">Prezime</label>
</div>
</form>
</div>
</div>
</div>
<div class="col s6 m6">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 2:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name2" type="text" class="validate">
<label for="first_name2">Ime</label>
</div>
<div class="input-field">
<input id="last_name2" type="text" class="validate">
<label for="last_name2">Prezime</label>
</div>
</form>
</div>
</div>
</div>
<div class="col s6 m6">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 3:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name3" type="text" class="validate">
<label for="first_name3">Ime</label>
</div>
<div class="input-field">
<input id="last_name3" type="text" class="validate">
<label for="last_name3">Prezime</label>
</div>
</form>
</div>
</div>
</div>
</div>
<button class="btn-large waves-effect waves-light light-blue darken-3 dugmeStart" type="submit" name="action">Start
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer light-blue darken-4">
<div class="footer-copyright">
<div class="container">
<center> © 2017 VTŠ Apps Team </center>
</div>
</div>
</footer>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
Here is the full css:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
background-color: rgb(232,232,232);
}
main {
flex: 1 0 auto;
}
.tabs .tab a{
color:#00ACC1;
}
.tabs .tab a:hover,.tabs .tab a.active {
background-color:transparent;
color:#00ACC1;
}
.tabs .tab.disabled a,.tabs .tab.disabled a:hover {
color:rgba(102,147,153,0.7);
}
.tabs .indicator {
background-color:#00ACC1;
}
.naslovPrijava{
font-size: 20px !important;
text-align: center;
height: 18px;
}
.naslovUcesnik{
font-size: 18px !important;
text-align: left;
margin-left:-15px;
margin-top: -15px;
}
.pomeriKarticu{
margin-left:-35px;
height: 50px;
}
.dugmeStart{
text-align: center;
}
You have to use the center-align class on a parent element of the button, so I added a parent with class="center-align"
body {
display: flex;
min-height: 100vh;
flex-direction: column;
background-color: rgb(232, 232, 232);
}
main {
flex: 1 0 auto;
}
.tabs .tab a {
color: #00ACC1;
}
.tabs .tab a:hover,
.tabs .tab a.active {
background-color: transparent;
color: #00ACC1;
}
.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
color: rgba(102, 147, 153, 0.7);
}
.tabs .indicator {
background-color: #00ACC1;
}
.naslovPrijava {
font-size: 20px !important;
text-align: center;
height: 18px;
}
.naslovUcesnik {
font-size: 18px !important;
text-align: left;
margin-left: -15px;
margin-top: -15px;
}
.pomeriKarticu {
margin-left: -35px;
height: 50px;
}
.dugmeStart {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<!--navbar-->
<header>
<nav>
<div class="nav-wrapper light-blue darken-3">
Kviz
<!--
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li>test</li>
</ul>
-->
</div>
</nav>
</header>
<main>
<div class="row">
<div class="col s12 m12 l6 xl6">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="images/kvizslika.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Kako se radi kviz ?
<a class="waves-effect light-blue darken-3 btn activator right">Instrukcije</a>
</span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Instrukcije<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
<div class="card-tabs">
<ul class="tabs tabs-fixed-width">
<li class="tab"><a class="active" href="#korak1">Poeni</a></li>
<li class="tab">Odgovori</li>
<li class="tab">Vreme</li>
</ul>
</div>
<div class="card-content grey lighten-4">
<div id="korak1">Test 1. Bla bla. <br/> Bla bla.</div>
<div id="korak2">Test 2</div>
<div id="korak3">Test 3</div>
</div>
</div>
</div>
</div>
<div class="col s12 m12 l6 xl6">
<div class="card">
<div class="row">
<div class="col s12 m12">
<div class="card light-blue darken-3">
<div class="card-content white-text">
<span class="card-title naslovPrijava">Prijava</span>
</div>
</div>
</div>
<div class="col s12 m12">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 1:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name" type="text" class="validate">
<label for="first_name">Ime</label>
</div>
<div class="input-field">
<input id="last_name" type="text" class="validate">
<label for="last_name">Prezime</label>
</div>
</form>
</div>
</div>
</div>
<div class="col s6 m6">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 2:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name2" type="text" class="validate">
<label for="first_name2">Ime</label>
</div>
<div class="input-field">
<input id="last_name2" type="text" class="validate">
<label for="last_name2">Prezime</label>
</div>
</form>
</div>
</div>
</div>
<div class="col s6 m6">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 3:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name3" type="text" class="validate">
<label for="first_name3">Ime</label>
</div>
<div class="input-field">
<input id="last_name3" type="text" class="validate">
<label for="last_name3">Prezime</label>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="center-align">
<button class="btn-large waves-effect waves-light light-blue darken-3 dugmeStart" type="submit" name="action">Start
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer light-blue darken-4">
<div class="footer-copyright">
<div class="container">
<center> © 2017 VTŠ Apps Team </center>
</div>
</div>
</footer>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
You can use margin to achieve this also
.dugmeStart {
text-align: center;
display: block;/**Added This**/
margin: 0 auto; /**Added This**/
}
Related
I'm tiring to using bootstrap 5 card to my attached image like card view, does any one know how to do that correctly on bootstrap 5 ?
here the my code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>My </title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body >
<!--Start main layout-->
<div class="wrapper">
<div class="d-flex justify-content-center mt-5">
<div class="">
<div class="container">
<div id="dynamic content" class="dynamic-content">
<div class="row align-items-center animated flipInY slow delay-2s">
<div class="col-md-2 col-xs-12">
<div class="content" id="tile1">
<i class="fa fa-home fa-5x"></i>
<p>My Book</p>
</div>
</div>
<div class="col-md-2">
<div class="content" id="tile2">
<i class="fa fa-user fa-5x"></i>
<p>About</p>
</div>
</div>
<div class="col-md-6">
<div class="content" id="tile3">
<i class="fa fa-cogs fa-5x"></i>
<p>Services</p>
</div>
</div>
<div class="col-md-2">
<div class="content" id="tile4">
<i class="fa fa-comment fa-5x"></i>
<p>Feedback</p>
</div>
</div>
<div class="col-md-4">
<div class="content" id="tile5">
<i class="fa fa-briefcase fa-5x"></i>
<p>Portfolio</p>
</div>
</div>
<div class="col-md-3">
<div class="content" id="tile6">
<i class="fa fa-envelope fa-5x"></i>
<p>Contact</p>
</div>
</div>
<div class="col-md-5">
<div class="content" id="tile7">
<i class="fa fa-quote-right fa-5x"></i>
<p>Free Quote</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End of main layout-->
</body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/popper.min.js" ></script>
<script src="js/bootstrap.min.js" ></script>
</html>
Thanks
Use Bootstrap 5 grid system
Use class .row to make rows and class .col to make columns.
As stated on Bootstrap 5 official website: There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g. col-4 spans four).
This is why I used .col-3 four times. These four .col-3 make four main "sections". All together they make up to maximal 12 columns per row (i.e. 3 * 4 = 12). Inside these four main "sections" there are bunch of .rows and .cols.
Which .col should you use?
Use .col-5 and .col-11 like this:
.col-5 two times inside the same .row if you want to have
two boxes in a row or
.col-11 one time inside the same .row if you want to have one box in a row.
Why these two (i.e., .col-5 and .col-11)?
Why not .col-6 and .col-12? Well, if you use .col-6 two times inside the same .row, there will not be any space left in between these boxes. Remember, there are maximal 12 columns per row! If you use .col-6 two times, you fill up the whole row (6 * 2 = 12). But if you use .col-5 two times, there is still some space left (5 * 2 = 10).
Using .col-5 two times inside the same .row:
Using .col-6 two times inside the same .row:
By default, if you use .col-5 two times in the same .row (see the first image), these two columns will position themselves so that there will be some space in between them.
Use .col-11 purely from aesthetical standpoint. If you use .col-11 below or above a row with two .col-5 these two rows will be the same width (if you use .col-12 this row will be wider than the row below or above with two .col-5). But in order to achieve both rows to be the same width, you also need to add .d-flex .justify-content-around to all rows where you want to have two boxes in a row to "push these two boxes apart from each other" and therefore make this row the same width as the one below or above. For more information, see this link.
Other stuff
Use class .d-flex .justify-content-center for the horizontal alignment and class .d-flex .align-items-center for the vertical alignment. With these two you can center your content (i.e. Font Awesome icons and titles) inside all of these boxes horizontally and vertically at the same time.
Be careful, you also need to wrap your Font Awesome icon and the title with <div class='text-center'>...</div> like this if you want to center the text (not the boxes but the text):
<div class='col-5 d-flex justify-content-center align-items-center one'>
<div class='text-center'>
<i class='fa fa-home fa-5x'></i>
<div id='white'>My book</div>
</div>
</div>
At the end of the HTML add an image. Add CSS like this:
position: absolute; and z-index: -100; to put it in the background (without position: absolute; the z-index will not work and consequently the image will not be put in the background),
width: 100vw; and height: 100vh; to make the image full screen width and height and
filter: blur(50px); to add the blur effect.
The snippet
body {
margin: 0;
padding: 0;
}
#wrapper {
width: 100vw;
height: 100vh;
}
#inner_wrapper {
margin-top: -15vh;
margin-left: 10%;
}
.row {
margin: 0;
width: 100%;
height: 15vh;
/* Set this value the same as the margin-top for the #inner_wrapper. */
}
.col-5,
.col-11 {
border-radius: 1vw;
}
.fa-home {
font-size: 2.5vw;
color: white;
}
#white {
font-size: 1vw;
color: white;
}
.one {
background-color: #2c78e2;
}
.two {
background-color: #15bb88;
}
.three {
background-color: #e27b2c;
}
.four {
background-color: #1a65ac;
}
.five {
background-color: #15bb88;
}
.six {
background-color: #8cc63e;
}
.seven {
background-color: #e27b2c;
}
.eight {
background-color: #e27b2c;
}
.nine {
background-color: #b44be8;
}
.ten {
background-color: #2c78e2;
}
.eleven {
background-color: #2c78e2;
}
.twelve {
background-color: #8cc63e;
}
#img {
position: absolute;
width: 100vw;
height: 100vh;
z-index: -100;
filter: blur(50px);
-moz-filter: blur(50px);
-webkit-filter: blur(50px);
-o-filter: blur(50px);
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link href='https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl' crossorigin='anonymous'>
<script src='https://use.fontawesome.com/releases/v5.15.3/js/all.js' data-auto-replace-svg='nest'></script>
</head>
<body>
<div id='wrapper' class='d-flex align-items-center'>
<div id='inner_wrapper' class='row'>
<div class='col-3'>
<div class='row m-2 d-flex justify-content-around'>
<div class='col-5 d-flex justify-content-center align-items-center one'>
<div class='text-center'>
<i class='fa fa-home fa-5x'></i>
<div id='white'>My book</div>
</div>
</div>
<div class='col-5 d-flex justify-content-center align-items-center two'></div>
</div>
<div class='row m-2 d-flex justify-content-around'>
<div class='col-5 d-flex justify-content-center align-items-center three'></div>
<div class='col-5 d-flex justify-content-center align-items-center four'></div>
</div>
</div>
<div class='col-3'>
<div class='row m-2 d-flex justify-content-center'>
<div class='col-11 d-flex justify-content-center align-items-center five'></div>
</div>
<div class='row m-2 d-flex justify-content-around'>
<div class='col-5 d-flex justify-content-center align-items-center six'></div>
<div class='col-5 d-flex justify-content-center align-items-center seven'></div>
</div>
</div>
<div class='col-3'>
<div class='row m-2 d-flex justify-content-around'>
<div class='col-5 d-flex justify-content-center align-items-center eight'></div>
<div class='col-5 d-flex justify-content-center align-items-center nine'></div>
</div>
<div class='row m-2 d-flex justify-content-center'>
<div class='col-11 d-flex justify-content-center align-items-center ten'></div>
</div>
</div>
<div class='col-3'>
<div class='row m-2 d-flex justify-content-start'>
<div class='col-5 d-flex justify-content-center align-items-center eleven'></div>
</div>
<div class='row m-2 d-flex justify-content-start'>
<div class='col-5 d-flex justify-content-center align-items-center twelve'></div>
</div>
</div>
</div>
<img id='img' src='https://animals.sandiegozoo.org/sites/default/files/2016-11/animals_hero_giraffe_1_0.jpg'>
</div>
</body>
</html>
Bootstrap Card Solution
with minimal css
The Layout
#groups {
min-width: 1140px;
}
body {
background-image: url(https://i.imgur.com/W3BxqV7.png);
}
.item {
height: 100px;
margin: 5px;
}
.group.col {
margin: 10px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sheffield haworth </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" id="groups">
<div class="group col">
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
</div>
<div class="group col">
<div class="row">
<div class="card col item">
</div>
</div>
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
</div>
<div class="group col">
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
<div class="row">
<div class="card col item">
</div>
</div>
</div>
<div class="group col">
<div class="row" style="width:138px">
<div class="card col item">
</div>
</div>
<div class="row" style="width:138px">
<div class="card col item">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
With Styling
Automated using JavaScript, but easy to implement with CSS nonetheless
const colors = ["#2C78E2", "#43BB88", "#E27B2D", "#1A65AC", "#43BB88", "#8CC53E", "#E27B2D", "#E27B2D", "#B44BE8", "#2C78E2", "#2C78E2", "#8CC53E"];;
document.querySelectorAll('.item').forEach(function(e, i) {
e.style.backgroundColor = colors[i];
})
#groups {
min-width: 1140px;
}
body {
background-image: url(https://i.imgur.com/W3BxqV7.png);
}
.item {
height: 100px;
margin: 5px;
}
.group.col {
margin: 10px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sheffield haworth </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" id="groups">
<div class="group col">
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
</div>
<div class="group col">
<div class="row">
<div class="card col item">
</div>
</div>
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
</div>
<div class="group col">
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
<div class="row">
<div class="card col item">
</div>
</div>
</div>
<div class="group col">
<div class="row" style="width:138px">
<div class="card col item">
</div>
</div>
<div class="row" style="width:138px">
<div class="card col item">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
With Content
const colors = ["#2C78E2", "#43BB88", "#E27B2D", "#1A65AC", "#43BB88", "#8CC53E", "#E27B2D", "#E27B2D", "#B44BE8", "#2C78E2", "#2C78E2", "#8CC53E"];;
document.querySelectorAll('.item').forEach(function(e, i) {
e.style.backgroundColor = colors[i];
})
#groups {
min-width: 1140px;
}
body {
background-image: url(https://i.imgur.com/W3BxqV7.png);
}
.item {
height: 100px;
margin: 5px;
}
.group.col {
margin: 10px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sheffield haworth </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" id="groups">
<div class="group col">
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
</div>
<div class="group col">
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Large</p>
</div>
</div>
</div>
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
</div>
<div class="group col">
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Large</p>
</div>
</div>
</div>
</div>
<div class="group col">
<div class="row" style="width:138px">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
<div class="row" style="width:138px">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Responsive
const colors = ["#2C78E2", "#43BB88", "#E27B2D", "#1A65AC", "#43BB88", "#8CC53E", "#E27B2D", "#E27B2D", "#B44BE8", "#2C78E2", "#2C78E2", "#8CC53E"];;
document.querySelectorAll('.item').forEach(function(e, i) {
e.style.backgroundColor = colors[i];
})
body {
background-image: url(https://i.imgur.com/W3BxqV7.png);
}
.item {
height: 100px;
margin: 5px;
}
.group.col {
margin: 10px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sheffield haworth </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" id="groups">
<div class="group col-md">
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
</div>
<div class="group col-md">
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Large</p>
</div>
</div>
</div>
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
</div>
<div class="group col-md">
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Large</p>
</div>
</div>
</div>
</div>
<div class="group col-md">
<div class="row" style="width:138px">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
<div class="row" style="width:138px">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
When I add a footer field under the div, which is absolute value, this field escapes on mobile and desktop. Also, iframe doesn't have full height. What should I do?
All details are given in the attachment.
When I add a footer field under the div, which is absolute value, this field escapes on mobile and desktop. Also, iframe doesn't have full height. What should I do?
All details are given in the attachment.
Attach:
My Code:
.contact-form {
position: absolute;
z-index: 100;
left: 0;
right: 0;
margin-top: 20em;
}
.form {
background: #fff;
border-radius: 1em;
padding: 3em;
}
.maps {
z-index: 0;
position: relative;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
width: 100%;
overflow: hidden;
margin-bottom: -1em;
}
.maps iframe {
width: 100%;
overflow: hidden;
height: 100vh;
}
<div class="contact-form">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form mt-5 mb-5 d-flex flex-md-row flex-column">
<div class="col-md-5 mt-5">
<h4>İletişim</h4>
<div id="title" class="mt-5 d-flex">
<h6><i class="fas fa-paper-plane mr-2"></i>E-Posta: baris#reklamodasi.com.tr</h6>
</div>
<div id="title" class="mt-4 d-flex">
<h6><i class="fas fa-phone-alt mr-2"></i>Telefon Numarası: +90 534 613 72 62</h6>
</div>
<div id="title" class="mt-4 d-flex">
<h6><i class="fas fa-sort-numeric-up mr-2"></i>Sicil Numarası: 000010001011111100</h6>
</div>
<div id="title" class="mt-4 d-flex">
<h6><i class="fas fa-sort-numeric-down mr-2"></i>Mersis Numarası: 000010001011111100</h6>
</div>
<p class="mt-5" style="color: #939393;"><i class="fas fa-map-marker mr-2" style="color: #0097b1;"></i>Küçükbakkalköy Mh. Küçük Setli Sokak Denge Panorama Plaza. No: 5-9 Kat: 3 D:13 34750, Ataşehir - İstanbul</p>
</div>
<div class="col-md-7 mt-5 mb-4">
<div class="d-block">
<div class="input-group mb-3 mr-2">
<input type="text" class="form-control" placeholder="Adınız Soyadınız" aria-label="ad-soyad" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="E-Posta" aria-label="e-mail" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1"></label>
<textarea placeholder="Mesajınız" class="form-control" id="exampleFormControlTextarea1" rows="10"></textarea>
</div>
<button style="width: 100%;" type="button" class="btn btn-sincap"><i class="far fa-paper-plane mr-2"></i>Gönder</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="maps">
<div class="row">
<div class="col-md-12">
<iframe class="map_h" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24095.133376834387!2d29.11235246540525!3d40.98385285407077!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x2e8746b0ec51372a!2sReklam%20Odas%C4%B1!5e0!3m2!1str!2str!4v1595930989510!5m2!1str!2str"
frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</div>
</div>
<div class="footer pb-5 text-center">
<div class="container">
<div class="row">
<div class="col-md-12 copy">
<img src="/materials/logo.svg" width="90px" height="90px">
</div>
<div class="col-md-12">
<p>All Rights Reserved 2020 | Reklam Odası</p>
</div>
</div>
</div>
</div>
thank you so much this works little bit but this time it looks like this.
Vikas Katal
When you absolute an element relative to another element try to wrap both by a parent element. It will automatically fix many issues you may face in the future.
<div class="form-map-wrapper">
<div class="contact-form">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form mt-5 mb-5 d-flex flex-md-row flex-column">
<div class="col-md-5 mt-5">
<h4>İletişim</h4>
<div id="title" class="mt-5 d-flex"><h6><i class="fas fa-paper-plane mr-2"></i>E-Posta: baris#reklamodasi.com.tr</h6></div>
<div id="title" class="mt-4 d-flex"><h6><i class="fas fa-phone-alt mr-2"></i>Telefon Numarası: +90 534 613 72 62</h6></div>
<div id="title" class="mt-4 d-flex"><h6><i class="fas fa-sort-numeric-up mr-2"></i>Sicil Numarası: 000010001011111100</h6></div>
<div id="title" class="mt-4 d-flex"><h6><i class="fas fa-sort-numeric-down mr-2"></i>Mersis Numarası: 000010001011111100</h6></div>
<p class="mt-5" style="color: #939393;"><i class="fas fa-map-marker mr-2" style="color: #0097b1;"></i>Küçükbakkalköy Mh. Küçük Setli Sokak
Denge Panorama Plaza. No: 5-9 Kat: 3 D:13 34750, Ataşehir - İstanbul</p>
</div>
<div class="col-md-7 mt-5 mb-4">
<div class="d-block">
<div class="input-group mb-3 mr-2">
<input type="text" class="form-control" placeholder="Adınız Soyadınız" aria-label="ad-soyad" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="E-Posta" aria-label="e-mail" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1"></label>
<textarea placeholder="Mesajınız" class="form-control" id="exampleFormControlTextarea1" rows="10"></textarea>
</div>
<button style="width: 100%;" type="button" class="btn btn-sincap"><i class="far fa-paper-plane mr-2"></i>Gönder</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="maps">
<div class="row">
<div class="col-md-12">
<iframe class="map_h" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24095.133376834387!2d29.11235246540525!3d40.98385285407077!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x2e8746b0ec51372a!2sReklam%20Odas%C4%B1!5e0!3m2!1str!2str!4v1595930989510!5m2!1str!2str" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</div>
</div>
</div>
Also add z-index wisely to relative and absolute elements because it can effect badly for other elements (Ex:- for Fixed Menu)
.form-map-wrapper {
position: relative;
z-index: 1;
}
.maps {
position: absolute;
z-index: 1;
}
I'm wanting to have a sticky footer nav type of thing on the bottom of my first col-6 (within, not outside) the div. Problem is, it has overflow which seems to be preventing me from getting it to work. Closest I got to was it starting in the correct position, then it scrolled due to the overflow. I'm scratching my head a bit here.
PS- Sorry there's a lot of code, I added a lot of placeholders to force the overflow so it's more authentic.
.b-wrapper {
border-radius: 4px;
width: 90vw;
height: 90vh;
max-width: 1024px;
max-height: 768px;
}
.booking-item {
padding: 30px 15px 30px 15px;
cursor: pointer;
border-bottom: 2px solid #f5f5f5;
min-height: 30px;
}
.tts {
max-height: 650px;
overflow-y: auto;
}
.book_apt {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
/* Vertically center the text there */
background-color: #f5f5f5;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container" style="height:100vh;">
<div class="row justify-content-center h-100">
<div class="col-12 my-auto mx-auto">
<div class="card">
<div class="card-body p-0">
<div class="row">
<div class="col-6 pr-0 tts">
<div class="book_apt">
<a class="btn btn-primary" href="#">Book Service</a>
</div>
<!-- Added a lot to force the overflow -->
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
Massage Therapy (60 minutes)
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
</div>
</div>
</div>
</div>
</div>
</div>
Change position: fixed; to position: sticky; and move book_apt to the bottom of your col-6.
This should do the trick.
.b-wrapper {
border-radius: 4px;
width: 90vw;
height: 90vh;
max-width: 1024px;
max-height: 768px;
}
.booking-item {
padding: 30px 15px 30px 15px;
cursor: pointer;
border-bottom: 2px solid #f5f5f5;
min-height: 30px;
}
.tts {
max-height: 650px;
overflow-y: auto;
}
.book_apt {
position: sticky;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
/* Vertically center the text there */
background-color: #f5f5f5;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container" style="height:100vh;">
<div class="row justify-content-center h-100">
<div class="col-12 my-auto mx-auto">
<div class="card">
<div class="card-body p-0">
<div class="row">
<div class="col-6 pr-0 tts">
<!-- Added a lot to force the overflow -->
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="book_apt">
<a class="btn btn-primary" href="#">Book Service</a>
</div>
</div>
</div>
</div>
<div class="col-6">
</div>
</div>
</div>
</div>
</div>
.book_apt {
background-color: #ddd;
position: fixed;
padding: 2em;
left: 50%;
bottom: 8%;
transform: translateX(-50%);
width: 58%;
z-index: 1000;
}
This is a picture --> http://prntscr.com/mp0lj8
After that world image i have empty white space..I dont know what is the problem.
Can any Django user tell me were i went wrong
This is html code in base template with load static and {% block content %} inside of it
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'seo_marketing/main.css' %}">>
{% if title %}
<title>Web Marketing Site - {{ title }}</title>
{% else %}
<title>Home Page</title>
{% endif %}
</head>
<body id="body">
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-light bg-steel fixed-top">
<div class="w-75 container-fluid">
<a class="logo nav-link" href="{% url 'index-page' %}">Web Marketing Services</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
<a class="nav-item nav-link" style="color:#f3f3f3;" href="{% url 'index-page' %}">Home</a>
<a class="nav-item nav-link" style="color:#f3f3f3;" href="#">About Us</a>
<a class="nav-item nav-link" style="color:#f3f3f3;" href="#">Services</a>
<a class="nav-item nav-link" style="color:#f3f3f3;" href="#">Portfolio</a>
<a class="nav-item nav-link" style="color:#f3f3f3;" href="#">Blog</a>
<a class="nav-item nav-link" style="color:#f3f3f3;" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</header>
<div class="container-fluid">
{% block content %}{% endblock %}
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
This is index_view that represents first home page that you see in printscreen link that i posted
{% extends "seo_marketing/base.html" %}
{% block content %}
<div class="container-fluid wrapper">
<div class="w-75 container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-6">
<h2 class="title">SERVING MOVING COMPANIES WITH MODERN SOLUTIONS IN THE ONLINE ENVIRONMENT</h2>
<div class="row">
<div class="col">
<div class="card" style="width:350px">
<img class="card-img-top" src="" alt="Card image">
<div class="card-body">
<h5 class="card-title text-center">Search Engine Optimization</h5>
<h5 class="card-text text-center">(SEO)</h5>
</div>
LEARN MORE
</div>
</div>
<div class="col">
<div class="card" style="width:350px">
<img class="card-img-top" src="" alt="Card image">
<div class="card-body">
<h5 class="card-title text-center">Search Engine Optimization</h5>
<h5 class="card-text text-center">(SEO)</h5>
</div>
LEARN MORE
</div>
</div>
<div class="col">
<div class="card" style="width:350px">
<img class="card-img-top" src="" alt="Card image">
<div class="card-body">
<h5 class="card-title text-center">Search Engine Optimization</h5>
<h5 class="card-text text-center">(SEO)</h5>
</div>
LEARN MORE
</div>
</div>
<div class="col">
<div class="card" style="width:350px">
<img class="card-img-top" src="" alt="Card image">
<div class="card-body">
<h5 class="card-title text-center">Search Engine Optimization</h5>
<h5 class="card-text text-center">(SEO)</h5>
</div>
LEARN MORE
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-6">
<form class="form">
<div class=" text-center">
<h2 class="form-headline">Free Digital Marketing</h2>
</div>
<div class="row form-inside">
<div class="col-xl-6">
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="Name" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
</div>
<div class="form-group">
<label for="phone">Your Website (URL)</label>
<input type="url" class="form-control" id="phone" placeholder="https://example.com" name="url">
</div>
<div class="form-group">
<label for="phone">Phone number</label>
<input type="tel" class="form-control" id="phone" placeholder="Enter phone number">
</div>
</form>
</div>
<div class="col-xl-1 vl"></div>
<div class="col-xl-4 div-p">
<p>✔Your current Google rankings and market position</p>
<p>✔Insight into the technical performance and potential of your website</p>
<p>✔Your online footprint, including backlinks and company mentions</p>
<p>✔Review of your content quality and level of optimization</p>
<small>*Done specifically for the moving industry</small>
</div>
<div class="text-center container">
<button type="submit" class="btn btn-block button1"><h2 class="display-2 get-now">GET NOW</h2></button>
</div>
</div>
</div>
</div>
{% endblock content %}
CSS
body {
background: #f5f2f2;
}
.wrapper {
background: url('http://pavbca.com/walldb/original/5/2/e/48792.jpg');
margin-top: 32px;
padding: 100px;
}
.bg-steel {
background-color: #073d3d;
}
.nav-link, .nav-item, a {
color: white;
}
.title {
font-weight: 400;
font-size: 26px;
color: #073d3d;
}
.form-headline {
background: #073d3d;
color: #ffffff;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 8px;
}
.form {
border: 1px solid black;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.col {
margin-top: 27px;
}
.form-inside {
padding: 20px;
}
.vl {
border-left: 1px solid gray;
height: 350px;
margin-left: 15px;
}
input {
font-size: 15px;
}
.get-now {
font-size: 25px;
color: white;
padding: 5px;
}
.button1 {
background: #8E6719;
margin-top: 15px;
}
.button1:hover {
background: #073d3d;
}
footer{
background: #073d3d;
}
.copyright {
background: #2e7070;
}
.container-fluid {
padding-right:0;
padding-left:0;
}
.footer {
color: white;
}
.div-p {
color: rgb(53, 0, 0);
font-size: 16px;
margin-left: -20px;
}
Check again : https://prnt.sc/mp0lj8
After i make footer it enters inside this section were i have form..Also when i make another section or div it enters again...Maybe i didnt put closing div somewere or similar to that but i cant find it...Can anybody tell me were i went wrong?
<footer class="container-fluid pt-4 footer">
<div class="container text-center text-md-left">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3">
<h5 class="text-uppercase">Footer Content</h5>
<p>Here you can use rows and columns here to organize your footer content.</p>
</div>
<hr class="clearfix w-100 d-md-none pb-3">
<div class="col-md-3 mb-md-0 mb-3">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</div>
<div class="col-md-3 mb-md-0 mb-3">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid copyright text-center py-3">© 2019 Copyright:
Mare pusi karinu
</div>
</footer>
I added this footer after
<div class="container-fluid">
{% block content %}{% endblock %}
</div>
in base.html
Check now --> http://prntscr.com/mp0ut7
I copied what u sent me in index_view but it remains the same. I was searching closing tags because i was 100% sure i missed it. Rly cant find a mistake...
{% extends "seo_marketing/base.html" %} {% block content %}
<div class="container-fluid wrapper">
<div class="w-75 container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-6">
<h2 class="title">SERVING MOVING COMPANIES WITH MODERN SOLUTIONS IN THE ONLINE ENVIRONMENT</h2>
<div class="row">
<div class="col">
<div class="card" style="width:350px">
<img class="card-img-top" src="" alt="Card image">
<div class="card-body">
<h5 class="card-title text-center">Search Engine Optimization</h5>
<h5 class="card-text text-center">(SEO)</h5>
</div>
LEARN MORE
</div>
</div>
<div class="col">
<div class="card" style="width:350px">
<img class="card-img-top" src="" alt="Card image">
<div class="card-body">
<h5 class="card-title text-center">Search Engine Optimization</h5>
<h5 class="card-text text-center">(SEO)</h5>
</div>
LEARN MORE
</div>
</div>
<div class="col">
<div class="card" style="width:350px">
<img class="card-img-top" src="" alt="Card image">
<div class="card-body">
<h5 class="card-title text-center">Search Engine Optimization</h5>
<h5 class="card-text text-center">(SEO)</h5>
</div>
LEARN MORE
</div>
</div>
<div class="col">
<div class="card" style="width:350px">
<img class="card-img-top" src="" alt="Card image">
<div class="card-body">
<h5 class="card-title text-center">Search Engine Optimization</h5>
<h5 class="card-text text-center">(SEO)</h5>
</div>
LEARN MORE
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-6">
<form class="form">
<div class=" text-center">
<h2 class="form-headline">Free Digital Marketing</h2>
</div>
<div class="row form-inside">
<div class="col-xl-6">
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="Name" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
</div>
<div class="form-group">
<label for="phone">Your Website (URL)</label>
<input type="url" class="form-control" id="phone" placeholder="https://example.com" name="url">
</div>
<div class="form-group">
<label for="phone">Phone number</label>
<input type="tel" class="form-control" id="phone" placeholder="Enter phone number">
</div>
</div>
<div class="col-xl-1 vl"></div>
<div class="col-xl-4 div-p">
<p>✔Your current Google rankings and market position</p>
<p>✔Insight into the technical performance and potential of your website</p>
<p>✔Your online footprint, including backlinks and company mentions</p>
<p>✔Review of your content quality and level of optimization</p>
<small>*Done specifically for the moving industry</small>
</div>
</div>
<div class="text-center container">
<button type="submit" class="btn btn-block button1"><h2 class="display-2 get-now">GET NOW</h2></button>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock content %}
So it seems it's a typical problem, but I haven't been able to remove that bloody blank space that completely disfigures my webpage on mobile view.
I have tried to remove individually each element to see what's happening, but I can't see it.
HTML code:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<!--Boostrap jQuery-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<!--Boostrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<!--Favicon-->
<link rel="icon" type="image/png" href="media/favicon-32x32.png" sizes="32x32" />
<!--Mi CSS-->
<link rel="stylesheet" type="text/css" href="estilo.css">
<title> TRAMA & DRAMA | Vestuario y producción</title>
</head>
<body>
<!-- navbar -->
<nav id="navegacion" class="navbar navbar-default navbar-fixed-top navbar-wrapper">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>¿Quiénes somos?</li>
<li>¿Qué hacemos?</li>
<li>
<img id="logo" src="media/logo-menu.png" alt="">
</li>
<li>Nuestros proyectos</li>
<li>Contacto</li>
</ul>
</div>
</div>
</nav>
<!--fin del navbar-->
<!--Barra rosa única del navbar-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa-nav"></div>
</div>
</div>
<!--Sldeshow -->
<div class="container-fluid">
<div class="row ">
<div id="pasion-div">
<div class="text-center">
<h1 id="pasion-texto">Pasión por el vestuario</h1>
</div>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 text-center img-responsive" id="id-quienes">
<img id="img-vestido" src="media/vestido.png" alt="Vestido">
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans" id="hacemos">
<h1>¿Qué hacemos?</h1>
</div>
</div>
<br>
<div class="row text-center fuente-merri">
<div class="col-sm-4">
<img src="media/icono-renta.png" alt="">
<p class="hacemos-headers"><b>Renta de vestuario</b></p>
<!--<p class="hacemos-descripciones fuente-merri">Nosotros hacemos muchas cosas bien chodas</p>-->
</div>
<div class="col-sm-4">
<img src="media/icono-coordinacion.png" alt="">
<p class="hacemos-headers"><b>Coordinación de vestuario</b></p>
</div>
<div class="row">
<img src="media/icono-diseno.png" alt="">
<p class="hacemos-headers"><b>Diseño de vestuario</b></p>
</div>
</div>
<div class="row text-center fuente-merri">
<div class="col-sm-4">
<img src="media/icono-espacios.png" alt="">
<p class="hacemos-headers"><b>Renta de espacios para cursos</b></p>
</div>
<div class="col-sm-4">
<img src="media/icono-realizacion.png" alt="">
<p class="hacemos-headers"><b>Realización</b></p>
</div>
<div class="row">
<img src="media/icono-mantenimiento.png" alt="">
<p class="hacemos-headers"><b>Mantenimiento de vestuario</b></p>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div id="proyectos">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans">
<h1>Nuestros proyectos</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center fuente-merri">
<p>Nos interesa que conozcas más a fondo los proyectos que llevamos a cabo en <b>Trama & Drama</b>.</p>
</div>
</div>
<br>
<div class="row text-center fuente-sans">
<div class="col-sm-4">
<img src="media/circ-1.png" alt="">
<h4>Diseño de vestuario</h4>
</div>
<div class="col-sm-4">
<img src="media/circ-2.png" alt="">
<h4>Producción y coordinación de vestuario</h4>
</div>
<div class="col-sm-4">
<img src="media/circ-3.png" alt="">
<h4>Renta de vestuario</h4>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="row text-center fuente-sans">
<div class="col-sm-6">
<img src="media/circ-4.png" alt="">
<h4>Servicio social</h4>
</div>
<div class="col-sm-6">
<img src="media/circ-5.png" alt="">
<h4>Actividades del mes</h4>
</div>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans">
<h1>Contacto</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center fuente-merri">
<div id="contacto-desc">
<p>¡Nos encantan los nuevos retos! Escríbemos, llámanos o platícanos de tu proyecto.</p>
</div>
</div>
</div>
<div class="row text-center">
<form role="form">
<div class="form-group">
<input type="text" name="" value="" placeholder="Tu nombre o el nombre de la empresa">
</div>
<div class="form-group">
<input type="email" name="" value="" placeholder="Correo electrónico">
</div>
<div class="form-group">
<input id="textfield" type="text" name="" value="" placeholder="Tu mensaje">
</div>
<button type="button" class="btn btn-primary">ENVIAR</button>
</form>
</div>
<br>
<div class="row text-center fuente-merri">
<p class="ch">Teléfonos</p>
<p class="cs">044 55 5601 1231</p>
<br>
<p class="ch">Correo eletrónico</p>
<p class="cs">info#tramaydrama.mx</p>
<br>
<p class="ch">Dirección</p>
<p class="cs">Eligio Villamar, No. 20, San Diego Churubusco. C.P: 04120, Delegación Coyoacan</p>
</div>
</div>
<br>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa-negra"></div>
</div>
</div>
<!--Footer-->
<footer>
<div class="container">
<div class="row fuente-sans">
<div class="col-sm-12 text-center" id="futer">
<a target="_blank" href="https://www.facebook.com/tramaydrama/?fref=ts"><img src="media/icono-fb.png" alt="Facebook"></a>
<img src="media/icono-inst.png" alt="Instagram">
<img src="media/icono-vimeo.png" alt="vimeo">
<p id="copyrights">Copyright Trama & Drama 2016 ©. Todos los derechos reservados | Página web por <a target="_blank"
href="http://animanoir.com"><b>Animanoir/Claque</b></a> | Diseño por <b>Cúmulo</b>.</p>
</div>
</div>
</div>
</footer>
<!--Bootstrap jQuery-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</body>
</html>
CSS code:
/*Fuentes*/
#import 'https://fonts.googleapis.com/css?family=Lora:700i'; /*Header*/
#import 'https://fonts.googleapis.com/css?family=Merriweather'; /*Títulos*/
#import 'https://fonts.googleapis.com/css?family=Open+Sans:300'; /*Subtítulos*/
body{
padding-top: 70px;
overflow: hidden
}
footer{
background-color: #B7254E;
color: white;
}
/*Los botones dentro de una font: ;ma*/
form > button{
width: 50%;
background-color: #5A1741 !important;
text-align: left !important;
}
/*ids*/
#copyrights{
padding-top: 25px;
}
#futer{
padding-top: 25px;
padding-bottom: 25px;
}
#textfield{
height: 150px;
}
#proyectos{
background-color: #5A1741;
color: white;
}
#id-quienes{
color: white;
background-color: #5A1741;
padding-top: 10px;
padding-bottom: 10px;
}
#imagen-fondo{
position: relative;;
z-index: -1;
}
#logo{
width: 13em;
}
#contacto-desc{
color: #692C52;
font-weight: bold;
}
#pasion-div{
background-image: url("media/portada-mejor.jpg");
background-repeat: no-repeat;
background-size: cover;
min-height: 650px;
padding: 13px;
font-size: 1.2em;
/*Para que se centre el texto*/
display: table;
width: 100%;
}
#pasion-div > div{
display: table-cell;
vertical-align: middle;
text-align: center;
}
#pasion-texto{
font-family: 'Lora', serif;
color: white;
font-size: 5em;
/*width: 400px;*/
}
#quienes{
background-color: #5A1741;
height: 200px;
}
/*clases*/
.ch{
font-weight: bold;
color: #5A1741;
}
.cs{
color: #5A1741;
color: #B7254E;
}
.navbar-nav{
background-color: white;
font-weight: bold;
}
.navbar-nav {
display:table;
width:100%;
margin: 0;
color: #B7254E;
}
.navbar-nav > li {
float:none;
display:table-cell;
text-align:center;
}
.navbar a{
color: #B7254E !important;
}
.barraRosa-nav{
width: 100%;
height: 45px;
background-color: #B7254E;
}
.barraRosa{
width: 100%;
height: 5px;
background-color: #B7254E;
}
.barraRosa-negra{
width: 100%;
height: 5px;
background-color: #5A1741
}
.hacemos-descripciones{
color: #B7254E;
}
.hacemos-headers{
color: #5A1741;
}
.fuente-merri{
font-family: 'Merriweather', serif;
}
.fuente-sans{
font-family: 'Open Sans', sans-serif;
}
/*Posicionar verticalmente en el centro*/
.vertical-align {
vertical-align: middle;
display: inline-block;
}
.form-group > input{
width: 50%;
}
Try this:
body {
overflow-x: hidden;
}
Try to add
html, body { margin: 0; }
I think you used to much class="row" even if there is no child columns.
for example you did this
<!--Sldeshow -->
<div class="container-fluid">
<div class="row "> /*remove this class="row" because you're not using col*/
<div id="pasion-div">
<div class="text-center">
<h1 id="pasion-texto">Pasión por el vestuario</h1>
</div>
</div>
</div>
</div>
and it should be like this
<!--Sldeshow -->
<div class="container-fluid">
<div> /*yep, this is right*/
<div id="pasion-div">
<div class="text-center">
<h1 id="pasion-texto">Pasión por el vestuario</h1>
</div>
</div>
</div>
</div>
so why removing the class row?
if you look at bootstrap.css you can see the .row have margin: 0 -15px, so why is that?
so that it can remove the excess 15px of the col-xx-00 class.
So try removing the class='row' that occupies the unnecessary white spaces.
here, i tried to remove the unnecessary rows.
<!-- navbar -->
<nav id="navegacion" class="navbar navbar-default navbar-fixed-top navbar-wrapper">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>¿Quiénes somos?</li>
<li>¿Qué hacemos?</li>
<li>
<img id="logo" src="media/logo-menu.png" alt="">
</li>
<li>Nuestros proyectos</li>
<li>Contacto</li>
</ul>
</div>
</div>
</nav>
<!--fin del navbar-->
<!--Barra rosa única del navbar-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa-nav"></div>
</div>
</div>
<!--Sldeshow -->
<div class="container-fluid">
<div> /*removed class="row" here*/
<div id="pasion-div">
<div class="text-center">
<h1 id="pasion-texto">Pasión por el vestuario</h1>
</div>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 text-center img-responsive" id="id-quienes">
<img id="img-vestido" src="media/vestido.png" alt="Vestido">
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans" id="hacemos">
<h1>¿Qué hacemos?</h1>
</div>
</div>
<br>
<div class="row text-center fuente-merri">
<div class="col-sm-4">
<img src="media/icono-renta.png" alt="">
<p class="hacemos-headers"><b>Renta de vestuario</b></p>
<!--<p class="hacemos-descripciones fuente-merri">Nosotros hacemos muchas cosas bien chodas</p>-->
</div>
<div class="col-sm-4">
<img src="media/icono-coordinacion.png" alt="">
<p class="hacemos-headers"><b>Coordinación de vestuario</b></p>
</div>
<div class="row">
<img src="media/icono-diseno.png" alt="">
<p class="hacemos-headers"><b>Diseño de vestuario</b></p>
</div>
</div>
<div class="row text-center fuente-merri">
<div class="col-sm-4">
<img src="media/icono-espacios.png" alt="">
<p class="hacemos-headers"><b>Renta de espacios para cursos</b></p>
</div>
<div class="col-sm-4">
<img src="media/icono-realizacion.png" alt="">
<p class="hacemos-headers"><b>Realización</b></p>
</div>
<div> /*removed class="row" here*/
<img src="media/icono-mantenimiento.png" alt="">
<p class="hacemos-headers"><b>Mantenimiento de vestuario</b></p>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div id="proyectos">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans">
<h1>Nuestros proyectos</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center fuente-merri">
<p>Nos interesa que conozcas más a fondo los proyectos que llevamos a cabo en <b>Trama & Drama</b>.</p>
</div>
</div>
<br>
<div class="row text-center fuente-sans">
<div class="col-sm-4">
<img src="media/circ-1.png" alt="">
<h4>Diseño de vestuario</h4>
</div>
<div class="col-sm-4">
<img src="media/circ-2.png" alt="">
<h4>Producción y coordinación de vestuario</h4>
</div>
<div class="col-sm-4">
<img src="media/circ-3.png" alt="">
<h4>Renta de vestuario</h4>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="row text-center fuente-sans">
<div class="col-sm-6">
<img src="media/circ-4.png" alt="">
<h4>Servicio social</h4>
</div>
<div class="col-sm-6">
<img src="media/circ-5.png" alt="">
<h4>Actividades del mes</h4>
</div>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans">
<h1>Contacto</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center fuente-merri">
<div id="contacto-desc">
<p>¡Nos encantan los nuevos retos! Escríbemos, llámanos o platícanos de tu proyecto.</p>
</div>
</div>
</div>
<div class="text-center"> /*removed class="row" here*/
<form role="form">
<div class="form-group">
<input type="text" name="" value="" placeholder="Tu nombre o el nombre de la empresa">
</div>
<div class="form-group">
<input type="email" name="" value="" placeholder="Correo electrónico">
</div>
<div class="form-group">
<input id="textfield" type="text" name="" value="" placeholder="Tu mensaje">
</div>
<button type="button" class="btn btn-primary">ENVIAR</button>
</form>
</div>
<br>
<div class="row text-center fuente-merri">
<p class="ch">Teléfonos</p>
<p class="cs">044 55 5601 1231</p>
<br>
<p class="ch">Correo eletrónico</p>
<p class="cs">info#tramaydrama.mx</p>
<br>
<p class="ch">Dirección</p>
<p class="cs">Eligio Villamar, No. 20, San Diego Churubusco. C.P: 04120, Delegación Coyoacan</p>
</div>
</div>
<br>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa-negra"></div>
</div>
</div>
<!--Footer-->
<footer>
<div class="container">
<div class="row fuente-sans">
<div class="col-sm-12 text-center" id="futer">
<a target="_blank" href="https://www.facebook.com/tramaydrama/?fref=ts"><img src="media/icono-fb.png" alt="Facebook"></a>
<img src="media/icono-inst.png" alt="Instagram">
<img src="media/icono-vimeo.png" alt="vimeo">
<p id="copyrights">Copyright Trama & Drama 2016 ©. Todos los derechos reservados | Página web por <a target="_blank"
href="http://animanoir.com"><b>Animanoir/Claque</b></a> | Diseño por <b>Cúmulo</b>.</p>
</div>
</div>
</div>
</footer>
or if you want, instead of removing rows, add col-sm-12 to the following tag. For example <div class="row"><div class="col-sm-12"><p>hey~</p></div></div>