EDIT new jsfiddle here which successfully replicates the issue
I have this white space appearing below my div.
Shown here in 2 photos, one is scrolled down:
I want to get rid of the whitespace. The web page should take up 100% of the viewport when including the navigation bar, so it should change when the viewport changes, and it does, and it is the right size, but then there is some random white space below the page that you can scroll down to. The white space looks to be the exact size of the navigation bar. How do I get rid of that white space? Please attempt to on the jsfiddle
code:
<nav class="navbar navbar-dark navbar-fixed-top">
<div class="container-fluid">
<button class="navbar-toggler hidden-md-up pull-xs-right"
type="button"
data-toggle="collapse"
data-target="#nav-content">
☰
</button>
<a class="navbar-brand" href="#">THE VEGAN REPOSITORY</a>
<div class="collapse navbar-toggleable-sm" id="nav-content">
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a class="nav-link" href="#">FIND</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ADD</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LOGIN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SIGN UP FREE</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="landing-page" class="text-uppercase">
<div class="container-fluid" style="height: 100%;">
<div class="row hidden-lg-up" style="height: 20%;">
<div class="col-xs-3 flex-xs-middle">
<img width="100" src="images/monster2.png" />
</div>
<div class="col-xs-3 offset-xs-6 flex-xs-middle">
<img class="pull-xs-right" width="100" src="images/monster4.png" />
</div>
</div>
<div class="row" id="middle-row">
<div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down flex-xs-top
flex-sm-middle">
<img width="80%" src="images/monster2.png" />
</div>
<div class="col-md-12 col-lg-6 flex-xs-middle ">
<div style="text-align: center;">
<h5 class="display-6">the vegan repository</h5>
<h1 class="display-3">
find vegan stuff* near you.
</h1>
<a id="try-now-button" class="with-border clickable" href="#search-filter-page">
<h5 class="text-center medium-text">try now</h5>
</a>
</div>
</div>
<div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down
flex-xs-top flex-sm-middle">
<img class="pull-xs-right" width="80%" src="images/monster4.png" />
</div>
</div>
<div class="row" style="height:5%;">
<h4 class="display-6 flex-xs-bottom">
*Stuff like restaurants, meat alternatives,
dairy alternatives, and much more!
</h4>
</div>
</div>
</div>
css:
#landing-page {
background-color: dimgray;
height: calc(100% - 50px);
margin-top: 50px;
overflow-y: auto;
padding: 10px 40px 10px 40px;
min-height: 396px; }
h1 {
font-size: 10vmin;
color: #FFF; }
h5 {
color: rgba(255, 255, 255, 0.7); }
h4 {
font-size: 1rem;
color: rgba(255, 255, 255, 0.7); }
/* MORE THAN 75 (XL) */
#middle-row {
height: 95%; }
/* LESS THAN 75 (LG) */
#media (max-width: 74.9em) {
#middle-row {
height: 95%; } }
/* LESS THAN 62 (MD) */
#media (max-width: 61.9em) {
#middle-row {
height: 75%; } }
/* LESS THAN 48 (SM) */
#media (max-width: 47.9em) {
#middle-row {
height: 75%; } }
/* LESS THAN 34 (XS) */
#media (max-width: 33.9em) {
#middle-row {
height: 75%; } }
.navbar-toggler {
color: rgba(255, 255, 255, 0.7); }
.navbar-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.7); }
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
color: #FFF; }
nav {
background-color: #fc4747; }
html, body {
height: 100%; }
EDIT new jsfiddle here which successfully replicates the issue
In the CSS if you want to specify height property using percents you must specify height of the parent container. so, in your case, your #landing-page element have its parents <body> tag, and <body> tag have its parent <html> tag. That's why you must state:
html, body { height: 100%; }
in you css.
Another issue is here:
<div class="row hidden-lg-up" style="height:20%;">
...
</div>
<div class="row" style="height:95%;">
...
</div>
<div class="row" style="height:5%;">
...
</div>
try to sum all of the heights =) change it so they in sum will make 100% and you will get what you want
UPDATE
I've managed to reproduce your problem locally, so here is the solution.
Actually, you have issue not with white line at the bottom, the main culprit of the bottom while line is margin-top property of #landing-page element =).
Look, if you remove <nav> element, you will see the same white line at the top. It appears that you set up height of 100% for #landing-page and than shifted it to bottom. Browser than draws background at 100% of visible space, but, as you can notice, you have some vertical scroling and everything that is under that scroll doesn't have background-color.
In general, margin's are tricky where it comes to background-color or background-image as it may lead to current (or similar) problem. Move margin-top value to padding-top value to have same spacing, than remove calc() from the height property, like this:
#landing-page {
background-color: dimgray;
height: 100%; /* just 100% */
overflow-y: auto;
padding: 60px 40px 10px 40px; /* added margin-top to padding-top */
min-height: 396px; }
In the jsfiddle we can't see the whitespace, so the problem may come from the html / body tags.
If they are always at 1155px no matter how much you resize, try setting the html and body height to 100% :
html, body { height: 100%; }
Set the background-color on body instead of a div, will solve your problem.
Related
I'm almost crying. Okay, not that much. But I spent almost three days trying to find a solution for this problem and I can't find anywhere.
I'm using Bootstrap, so only a part of the CSS is available as the main classes I use the default from Bootstrap.
This is what I want to achieve:
This is what it's looking like right now (both mobile and desktop)
The live website: http://acessogestaocontabil.com.br/
And this is the code:
HTML
<!-- navHeader -->
<div class="container-fluid" id="header">
<div class="container d-xl-none">
<img src="img/footerLogo.png" class="img-fluid" alt="">
</div>
<div class="midias d-none d-xl-block">
<nav>
<i class="fab fa-instagram"></i> | <i class="fab fa-facebook-f"></i>
</nav>
</div>
<div class="container d-none d-xl-block">
<div class="row">
<div class="col-9">
<nav class="nav">
<li class="nav-item"><i class="fas fa-home"></i></li>
<li class="nav-item">Sobre</li>
<li class="nav-item dropdown">
Consultoria e Assessoria
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
Assessoria Contábil
Pessoas
Fiscal
Tributária
</div>
</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Contato</li>
</nav>
</div>
</div>
</div>
</div>
CSS/SASS
#header {
background-image: url('../img/bg-topo-desk.png');
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
min-height: 195px;
}
#header .nav {
background: url('../img/bgHeaderMenu.jpg') no-repeat #13165f;
position: absolute;
transform: none;
width: 100%;
top: 133px;
right: -184px;
overflow: hidden;
padding: 0px 20px;
}
#menuHeader {
position: relative;
right: 210px;
}
#header .nav a {
color: #FFF;
text-transform: uppercase;
}
#header .nav .nav-item {
border-right: 1px solid #3249b7;
}
#header .midias {
background: url('../img/bgSocialHeader.jpg') no-repeat #3d5cc7;
height: 40px;
position: absolute;
top: 133px;
right: 0px;
z-index: 1;
padding: 6px 180px 5px 60px;
}
#header .midias a {
color: #FFF;
}
// Small devices (landscape phones, less than 768px)
#media (max-width: 767.98px) {
#header .midias {
display: none;
}
}
// Large devices (desktops, less than 1200px)
#media (max-width: 1199.98px) {
#header .nav {
display: none;
}
}
The logo is inserted into the image, so it will show as a normal background in desktop. In mobile, I change to the a inserted image, with a link. I know is not the best scenario but it's what I was capable to do.
The navigation menu is the main problem. It looks okay in some resolution, but when I try to resize, it just breaks. I tried everything: two divs, two backgrounds, flexbox, position absolute, position relative and everything just fails.
Does anyone knows how to solve it? :(
For what I can suggest is - move the background to its own element, then you can remove all position: absolute declarations, as the other elements will neatly fall below it. As the image should, as I understand, displayed whole, the easiest way is to just use <img src="/img/bg-topo-desk.png" alt="header" style="width:100%"/>. (of course you should move the width declaration to css).
I've been trying to follow the the guide below:
https://bootstrapious.com/p/bootstrap-sidebar
I want my layout to be the following:
where the black bar is a navigation that hides away using negative margins, the top bar grows in width when the left bar is hidden. The white space is for my content which goes into a container for bootstrap grid.
However current my layout like this:
The blue bar flex's to the right but doesn't go to the top of the page
My HTML:
</head>
<div class="wrapper">
<header class="skin-josh">
<nav id="sidebar">
<div class="page-sidebar sidebar-nav">
<li class="active">
#if(isset($id))
#include('layouts._leftmenu')
#else
#include('layouts._leftmenu_noproject')
#endif
</li>
</div>
</nav>
</header>
<nav class="navbar fixed-top navbar-light bg-light" role="navigation">
#if (session()->get('projectname'))
<h3 style="float:left;color:white;padding-left:25px;">{{ session()->get('projectname') }}</h3>
#endif
<div class="burgernav" style="float:left;height:65px;padding-left: 5px;">
<button class="btn btn-secondary" type="button" id="sidebarCollapse" style="background-color:rgb(0, 131, 185);color:white;height:65px;">
<i class="fas fa-bars fa-lg"></i>
</button>
</div>
</nav>
<body id="content">
#yield('content')
</body>
</div>
My CSS:
wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 150px;
max-width: 150px;
min-height: 100vh;
vertical-align : top;
}
#sidebar.active {
margin-left: -150px;
}
.sidebar {
min-height: 92.58vh;/*100vh;*/
display: block;
width: 150px;
}
.left-side{
width:150px;
min-height:100vh;
}
.navbar {
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 0;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
You can set the black div to have position: fixed, and then create a new div after the header wrapping all the div below it, with a margin-left equals to the width of the black div.
And dont need the display: flex in the .wrapper after that.
I'm writing the CSS for my site. I have text that I am putting on top of my background image. My HTML and CSS is below:
HTML
<header class="site-header">
<div class="site-header__menu-icon">
<div class="site-header__menu-icon__middle"></div>
</div>
<div class="site-header__menu-content">
<div class="site-header__btn-container">
Request A Demo
</div>
<nav class="primary-nav primary-nav--pull-right">
<ul>
<li>Home</li>
<li>Services</li>
<li>Why Us</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="section">
<picture>
<img src="assets\images\pepper.jpg">
</picture>
<div>
<div class="section__text-content">
<h1 class="section__title">Company</h1>
<h3 class="section__sub-title">Company Slogan</h3>
<div class="btn-container">
<a class="btn" href="#">Talk To A Specialist</a>
<a class ="btn btn__white btn__pepper-white" href="#">Get A Quote</a>
</div>
</div>
</div>
</div>
CSS
.section {
position: relative;
max-width: 100%;
&__text-content {
position: absolute;
top: 30%;
width: 100%;
margin-left:
}
&__title {
font-size: 7rem;
font-weight: 300;
color: #ffffff;
margin-bottom: 0;
}
&__sub-title {
font-size: 2.5rem;
font-weight: 300;
margin-top: 3%;
margin-bottom: 2%;
color: #ffffff;
}
}
The problem arises when I try to add a margin-left to the .section class in my CSS, because then a blank which space to the right of my screen appears with a horizontal scroll bar in direct proportion to the amount of margin I specified to move to the left.
I know that I could use a simple "background-image" for my css, but I'd prefer to do it this way for responsive imaging (it's how I learned to do it and I'm on a bit of a time crunch).
Any suggestions?
FIXED
My problem was I was writing my margin in relative terms by doing:
.section__text-content {
position: absolute;
margin-left: 10%
}
Which is wrong, because the &__text-content is set to position: absolute
Percentage is relative position, with an absolutely positioned image you need absolute margins (i.e. pixels)
I'm trying to understand 3 problems.
1) When minimizing to Col-XS, the picture is slightly off from centre - How do I fix this?
2) When the logo sits inside the Column, it forces the entire menu to widen due to the logo taking up space. This causes a huge amount of background colour (from the menu) to appear when not needed. Can anyone recommend a suitable fix for this (whether this be a design recommendation or a coding fix)?
3) If the above cannot be fixed, how do I make the 4x Menu items move from the top of the bar to the bottom? Would this be a job for Display: Relative or something like that? Or do the display tags not work within bootstrap (v3.3.5)?
Thanks in advance!
Snippet
.logo {
width: 150px;
height: 150px;
}
.header {
background: #5A1FD3;
border: 2px solid #46248B;
}
.header li {
list-style-type: none;
background: #5A1FD3;
font-weight: bold;
font-size: 20px;
text-align: center;
}
.header li:hover {
transition: 1.5s;
background: #46248B;
}
.header a:link {
color: azure;
}
.header a:visited {
color: azure;
}
.header a:active {
color: azure;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- NAV MENU -->
<div class="container-fluid">
<div class="row">
<div class="header col-sm-12 col-xs-12">
<div class="row text-center col-sm-3 col-xs-0">
<img class="logo center-block" src="Pictures\Jamie Bohanna.png" alt="Logo">
</div>
<ul>
<li class="col-sm-2 col-xs-12">Home
</li>
<li class="col-sm-2 col-xs-12">Portfolio
</li>
<li class="col-sm-2 col-xs-12">Rates
</li>
<li class="col-sm-2 col-xs-12">Contact
</li>
</ul>
</div>
</div>
</div>
It is, for logical reasons, practical to use two rows. One for the logo and one for the list. And together they are the header:
<div class="container-fluid">
<div class="header">
<div class="row">
<div class="col-..."
<img class="logo" />
</div>
</div>
<div class="row">
<div class="col-..."
<ul class="list-unstyled"><!-- .list-unstyled is a bootstrap class -->
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div><!-- End of .header -->
</div>
.container-fluid has a padding-left: 15px and a padding-right: 15px, so that one can make
.header {
margin: 0 -15px;
...
}
so that there will be no gap on the right and left side.
Example
I'm trying to finish up my portfolio page right now. Having an issue getting the top/bottom padding spacing to stay the same on 24" and 13". As you can see from the images below, the 24" inch currently looks how I want it to, with all my elements on the right side directly in the middle. When it becomes 13", the spacing is off and the elements aren't centered. How do I fix this?
24" - http://i988.photobucket.com/albums/af6/jtbitt/jay-portfolio-24-inch-spacing_zpsenaqpzp4.png
13" - http://i988.photobucket.com/albums/af6/jtbitt/jay-portfolio-13-inch-spacing_zps45ygidew.png
HTML FRONT PAGE -
<body ng-app="jayPortfolio">
<!-- NAVBAR -->
<header>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">JAY BITTNER</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>EXPERIENCE</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- LOAD OTHER PAGES HERE -->
<main>
<div id='ng-view' ng-view></div>
</main>
</body>
HTML FRONT PAGE PARTIAL -
<section id="about" ng-controller="aboutController">
<div class="container-fluid">
<div class="row">
<div class="about-left col-lg-6 col-md-6 col-sm-12 col-xs-12">
</div>
<div class="about-right col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="about-content">
<div class="about-content-title">
<h1><strong>I'M JAY.</strong></h1>
</div>
<br />
<div class="about-content-info" ng-model="about.firstParagraph">
<p ng-if="about.firstParagraph"><strong>An entrepenurial minded, Full Stack Developer. Whenever I'm up against a challenge that I care about, it gives me a rush. Focusing on the big picture is important to me, but I never forget the smaller details. Anything that is not challenging is boring, and makes me yawn. Anything that is seemingly impossible interests me a lot. I'm ready to get to work.</strong></p>
<p ng-if="!about.firstParagraph"><strong>Currently seeking a Javascript position, using the MEAN stack, in New York City. Being innovative, ambitious, and hard working are values that are very important to me. I want to join a company that has similar values and has goals of reaching ridiculous levels of success, not just modest realistic ones. I love working with a solid team.</strong></p>
</div>
<br />
<div class="about-button">
<button ng-if="about.firstParagraph" class="label label-success" ng-click="about.switchParagraph()"><strong>MORE =></strong></button>
<button ng-if="!about.firstParagraph" class="label label-success"><strong>VIEW PORTFOLIO</strong>
</div>
<br />
<div class="about-personal-info">
<h4><strong>Email: jaybittner#gmail.com</strong></h4>
<br />
<div class="about-icon" ng-repeat="profile in about.profiles">
<img src="{{ profile.icon }}" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
CSS -
#about {
height: 100%;
width: 100%;
background-image: -webkit-gradient(linear,left top,right bottom,color-stop(0.12, #061419),
color-stop(0.61, #36875F)
);
background-repeat: no-repeat;
}
#about .container-fluid, #about .container-fluid .row {
height: 100%;
width: 100%;
}
.about-left {
height: 100%;
background-image: url('../../images/jay-ocean.jpg');
background-repeat: no-repeat;
background-position: 0 100%;
border-right: 3px solid black;
}
.about-right {
width: 50%;
height: 100%;
}
.about-content {
width: 50%;
height: 100%;
margin: 0 auto;
padding-top: 20%;
padding-left: 5%;
text-align: center;
}
.about-content-title h1{
font-size: 3.4vw;
}
.about-content-info p {
font-size: 1vw;
word-spacing: 0.3vw;
}
.about-button button {
color: gray;
border: 1px solid black;
background-color: black;
}
.about-button a {
color: gray;
}
.about-personal-info h4 {
font-size: 1vw;
word-spacing: 0.3vw;
}
.about-icon {
display: inline;
word-spacing: 0.3vw;
}
.about-icon img {
width: 30px;
height: 30px;
border-radius: 10px;
border: 1px solid black;
}
Your problem seems to be in the navigation bar, where there is a solid container, when your page content lies in container-fluid.
It's hard for me to throw a straight off working code for you by now, but your issue is the placement of your navbar-brand. You could try to center it or adjust it's position via padding or margin in media queries.
To do so, put this in your CSS:
#media (max-width: 1199px)
{
.navbar-brand {
padding-left: 100px;
}
}
The max width in media query calculates the screen viewport and changes the appearance of the site for something desired by the exact width or height of the page on screen.
With max-width: 1199px this media query uses this padding-left attribute to .navbar-brand when the screen (or the browser window) is showing the page below this width.
You can also work around with this to use with min-width or even height related viewport settings in CSS.