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.
Related
Edit #1: After I give my height a definition of 89px, my mobile menu seems to go behind my content.
I'm having an issue with the mobile version of my navbar. The navbar isn't as tall as logo, so when I click on it my "Home" menu item isn't being shown unless I hover over it.
Here's the pictures for both issues:
Here's my HTML:
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="row">
<div class="navbar-header">
<a class="navbar-brand " style="margin-top: -15px; float: left;" href="#">
<img alt="Brand" class="pull-left" style="margin-left: -15px;" src="Images/logo-resized.png">
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Internet</li>
<li>Phone</li>
<li>Android TV</li>
<li>Shaw Direct</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</nav>
And here's my CSS:
.navbar-default {
background-color: #00AEFE;
}
.nav.navbar-nav li a{
color: white;
font-size: 18px;
line-height: 50px;
}
.col-xs-0 {
display: none;
}
nav {
height: 89px;
}
In bootstrap navbar-brand has some padding, also the height of <img> should be controled by additional css like navbar-brand img {height:40px}.
although if we could see your live html, it was nice.
EDITED
use this CSS to give some height longer than height of your image like 100px or higher
#media (min-width: 768px) {
.navbar-header {
height: 100px;
}
}
OR
If you don't want to change the height of navbar-header you can add some padding to navbar-toggle button so it will add height of navbar-header:
#media (min-width: 768px) {
.navbar-toggle {
padding: 33px 10px;
}
}
<a class="navbar-brand " style="margin-top: -15px; float: left;height:auto" href="#">
<img alt="Brand" class="pull-left" style="margin-left: -15px;" src="Images/logo-resized.png">
</a>
Change the height of navbar-brand class
OR
<style>
.navbar-brand img {
max-height: 40px;
width: auto;
}
</style>
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.
Desktop View:
Desktop View
Mobile View:
Mobile View
.event_item {
background: #2b325f;
color: white;
text-align: center;
padding: 30px;
vertical-align: top;
margin:0 0 5px 0;
height: 215px;
}
.event_item h2{margin-bottom:0;}
.event_item h6{margin-bottom:10px;}
.event_summary{display:none;}
.event_item_read p{color:#b00909;text-transform:uppercase;}
.btn-primary{
background:#b00909 !important;
color:white;
border-color: transparent;
}
.btn-align {
text-align: center;
margin-top: -20px;
margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row eventRow">
<div class="col-md-4">
<div class="events">
<div class="event_item">
<div class="col-md-12">
<h6>03/16/2016</h6>
<h2>Just a title testing, why is this long?</h2>
<p>Detroit</p>
<h5 style="font-weight: bold;">7pm - 7am</h5>
</div>
</div>
</div>
<div class="btn-align">
<button type="button" class="btn btn-primary doEdit" editKey="'.$key.'"data-toggle="modal" data-target="#editEvent">
Edit Event
</button>
<button type="button" class="btn btn-primary doDelete" delKey="'.$key.'" data-toggle="modal" data-target="#deleteEvent">
Delete Event
</button>
</div>
</div>
</div>
</div>
How would I fix this issue?
You're missing your row class. The column floats which collapses the container, which made you decide to add a set height, which was too short for that amount of text. Remove the fixed height and add the .row class to .event_item and it should be fixed.
https://jsfiddle.net/19aqx97w/
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
.event_item {
background: #2b325f;
color: white;
text-align: center;
padding: 30px;
vertical-align: top;
margin:0 0 5px 0;
}
.event_item h2{margin-bottom:0;}
.event_item h6{margin-bottom:10px;}
.event_summary{display:none;}
.event_item_read p{color:#b00909;text-transform:uppercase;}
.btn-primary{
background:#b00909 !important;
color:white;
border-color: transparent;
}
.btn-align {
text-align: center;
margin-top: -20px;
margin-bottom: 20px;
}
<div class="container">
<div class="row eventRow">
<div class="col-md-4">
<div class="events">
<div class="event_item row">
<div class="col-md-12">
<h6>03/16/2016</h6>
<h2>Just a title testing, why is this long?</h2>
<p>Detroit</p>
<h5 style="font-weight: bold;">7pm - 7am</h5>
</div>
</div>
</div>
<div class="btn-align">
<button type="button" class="btn btn-primary doEdit" editKey="'.$key.'"data-toggle="modal" data-target="#editEvent">
Edit Event
</button>
<button type="button" class="btn btn-primary doDelete" delKey="'.$key.'" data-toggle="modal" data-target="#deleteEvent">
Delete Event
</button>
</div>
</div>
</div>
</div>
According to your comment, you want to align the buttons in your desktop view the way it is in your mobile view. You are currently using margin-top: -20px; on your .btn-align container. Remove this and your buttons will align themselves right after your content.
EDIT: Excuse me, I totally misunderstood you. Here should be what you actually want to achieve -> fiddle
You simply used a wrong colum-rule for your container. You did just put col-md-4 in it while it should be col-md-12 or empty (like you've done it for your mobile one).
By adding col-*-12 you take the displays full width. Same goes for if you leave that empty. Since you've set up a value for md and not for xs, your xs was totally fine while your md looked a bit different. I hope now this solves your problem.
Note: If you want your buttons to be a bit in your event-item, you just add back your margin-top: -20px;. You can check my previous answer for that. Hope that helps and clarifies everything now.
use percentages as that I used in the .event_item portion. Percentages will automatically adjust it.
.event_item {
background: #2b325f;
color: white;
text-align: center;
padding: 5%;
vertical-align: top;
margin:0 0 5px 0;
height: 70%;
}
I am setting a responsive layout for my personal website, which has worked in a simple example. However I am not getting the same results. It may have something to do with including the Bootstrap files in my html. Below is the html and css code for the responsive layout:
HTML:
<header>
<a href="/" id="logo">
<h1>Brian Weber</h1>
<h2>Engineer | Python Programmer</h2>
</a>
<!-- Navigation bar -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- <a class="navbar-brand" href="#">Brian Weber</a>
<p>Engineer</p> -->
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</div>
</div>
</header>
CSS:
#media screen and (min-width: 660px) {
/*********************************
HEADER
*********************************/
.navbar .navbar-default {
float: right;
background: none;
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width: 45%;
}
#logo {
float: left;
margin-left: 5%;
text-align: left;
width: 45%;
}
#logo h1 {
font-size: 2.5em;
}
#logo h2 {
font-size: 1.7em;
margin-bottom: 20px;
}
header {
border-bottom: 5px solid #599a68;
margin-bottom: 60px;
}
}
When I check the code in a browser, the h1 and h2 text do not appear. However when I inspect the element there are placeholders for where the text should be. The text color is already set to black in the main.css. My question is how would I fix this problem so that the layout looks like the picture below? I am thinking maybe there is an issue with the bootstrap files where they are overriding the CSS code.
Correct format for header and navbar
h1 and h2 text disappearing
Add this in your style
#logo
{
z-index:1;
position:relative;
}
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order. and in your style navbar-default hide the h1 and h2 that's why it's not looking
Make .navbar-default float right when in the larger views. It was covering up the left floating div that contained your name etc.
Add position:relative; and z-index for logo.
#logo {
float: left;
margin-left: 5%;
text-align: left;
width: 45%;
position: relative;
z-index: 1;
}
I am designing a responsive HTML page using bootstrap css. I am using the navbar-brand class in which there is a logo. The code for that segment is:
<div class="grad">
<a class="navbar-brand" id="navbar-logo" href="http://someUrl"><img src="images/someLogo.gif" height="43" alt="logo"></a>
<div>
<ul class="nav navbar-nav mycss-aligned">
<li><span class="name">LastName, FirstName</span></li>
<li><span class="logo1">some</span><span class="logo2">Stuff</span></li>
</ul>
</div>
</div>
That mycss-aligned is just a few dimensions for the list below it and is not relevant to our problem so I am not sharing it. The relevant CSS from BootStrap has been slightly modified by me to suit my needs and it is as follows:
.navbar-brand {
float: left;
height: 60px;
padding: 10px 10px;
font-size: 18px;
line-height: 20px;
}
.navbar-brand>img {
-o-object-fit: contain;
object-fit: contain;
max-height: 100%;
height: 100%;
max-width: 100%;
width: auto;
margin: 0 auto;
margin-left:125%;
margin-top:-5%;
}
I have a HTML div which is center aligned and has 60% width of total screen. I am trying to match the start of the division with the start of the logo. While I can achieve this, as you can see, I am required to use an unusually high percentage for the margin-left value in .navbar-brand>img. That being said, Even when I can achieve that, the design is barely responsive and the logo does not slide across along with the division when the page is resized. The funny thing is
<div>
<ul class="nav navbar-nav mycss-aligned">
<li><span class="name">LastName, FirstName</span></li>
<li><span class="logo1">some</span><span class="logo2">Stuff</span></li>
</ul>
</div
is perfectly responsive. What can I do to solve this?
First I would suggest that you use more of the bootstrap components to create a context for the elements you want to use. E.g. there is a navbar-fixed-top class.
You can see my fork of the code on jsfiddle There is an outline on all divs to visualise the alignment.
Here is how I would write the same
<header>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-content">
<a class="navbar-brand" id="navbar-logo" href="http://someUrl">
<img src="images/someLogo.gif" height="43" alt="logo">
</a>
<ul class="navbar-list">
<li><span class="name">LastName, FirstName</span>
</li>
<li><span class="logo1">Some</span><span class="logo2">Stuff</span>
</li>
</ul>
</div>
</div>
</div>
</header>
<main>
<div class="container">
<div style="width: 60%; margin:0 auto; text-align:justify;">
<br>
<br>
<br>
<br>
<br>
<br>This is just some uberRandom text to show how the division is getting aligned and justified
</div>
</div>
</main>
And the re-written css
.navbar {
background: linear-gradient(white, grey);
box-shadow: 0 0 10px #333;
}
.navbar-content {
width: 60%;
margin: 0 auto;
font-size: 13px;
line-height: 17px;
}
.navbar-list {
float: right;
margin-top: 5px;
}
.navbar-brand {
padding: 0;
}
.navbar-brand>img {
-o-object-fit: contain;
object-fit: contain;
max-height: 100%;
height: 100%;
max-width: 100%;
padding-top: 10px;
margin: 0 auto;
}
Notice how there is an inner content of the navbar that is set to same width as the actual content (the paragraph). That way you don't have to use those silly margins and the image and text should align.