While using my computer everything works well but once I test on my phone, I get a weird margin on the right, I changed the body background color to black & the margin's color is now black so I guess it comes from the body tag.
I can't give whole CSS code +1000 lines but here are the lines affecting margin / body
I tried to set body margin & padding to 0 but nothing.
* {
margin: 0;
padding: 0;
}
body {
background-color: #000;
margin: 0;
padding: 0;
min-height: 100vh;
width: 100%;
overflow-x: hidden;
font-family: 'PT Sans Narrow', sans-serif;
text-rendering: optimizeLegibility;
height: 100%;
}
#media (max-height: 400px) {
body {
height: 100vh;
}
}
<div class="open">
<div class="layer"></div>
<div class="layer"></div>
</div>
<div class="wrapper">
<div class="wrap">
<section>
<div class="header">
<h2 class="logo">Fallen Angels</h2>
<i class="fa fa-bars x2" onclick="menuToggle()" />
<ul id="navbar">
<li>Home</li>
<li>Accounts</li>
<li>Boosting</li>
<li>Contact</li>
<li>Login</li>
<li>Sign Up</li>
<i class="fa fa-times x2" onclick="menuToggle()"></i>
</ul>
</div>
<div class="bannerText">
...
</div>
</section>
</div>
</div>
I expected changing body's width to fix it but it just reduced the size of the whole thing including the margin :/
website preview : http://preview.fallen-angels.ga/
Normaly with this problem, I usually inspect the elements one by one. The problem with your case is this element:
<img src="assets/img/Xpreview.png" width="140%" style="padding-right: 40%;">
In small screens, the col-md-6 width is 100%. Padding right 40% add 40% of the element's width to the image. That's why it exceeds the screen width, and adds the extra space there.
You can use style="max-width:100%" to fix your problem.
So at you can write this instead:
<img src="assets/img/Xpreview.png" width="140%" style="max-width:100%">
Related
Here are some code fragments. I have a banner and I am changing its' size depending on whether it is the home page or other pages.
HTML:
<div id="page1">
<header class=large_banner> <a class="logo" title="Swordsmen Martial Arts" href=""><span>Swordsmen Martial Arts</span></a>
<div id="myBanner" class="hero">
<h1>We know Martial Arts</h1>
<a class="btn" title="Get training from Masters" href="http://hdkumdo.com/smen/about">Get training<span> from leading Masters</span></a>
</div> ...
CSS
header div.hero {
position: absolute;
width: 42%;
top: 99px;
left: 55%
}
header div.hero h1 {
line-height: 1em;
margin: 0 0 30px 0;
color: #fff;
}
.large_banner {
height: 300px; /* default height for Home page is 200px*/
};
The banner size component works fine and I get the correct size according to the page. My problem is that I also want to change the top property of the div hero so that it is more centrally aligned (between top and bottom) within the overall banner.
I have tried different combinations of class hero, large_banner and id myBanner with no success.
You can use display:flex. Put the .hero in a container and give container css like in example: where 100vh is window height and 34px is Logo height
#myBanner {
height: calc(100vh - 34px);
display: flex;
align-items: center;
}
.hero {
margin-top: -34px;
}
<div id="page1">
<header class=large_banner>
<a class="logo" title="Swordsmen Martial Arts" href="">
<span>Swordsmen Martial Arts</span>
</a>
<div id="myBanner">
<div class="hero">
<h1>We know Martial Arts</h1>
<a class="btn" title="Get training from Masters" href="http://hdkumdo.com/smen/about">Get training<span> from leading Masters</span></a>
</div>
</div>
</header>
</div>
First here is the screenshot of what is wrong with the current code
and here is the code that is associated with the same
<nav class="blue darken-3">
<div class="nav-wrapper">
Chatter
<ul class="right hide-on-med-and-down">
<li><a nohref><i class="material-icons">search</i></a></li>
<li><a nohref><i class="material-icons">view_module</i></a></li>
<li><a nohref><i class="material-icons">refresh</i></a></li>
<li><a nohref><i class="material-icons">more_vert</i></a></li>
</ul>
</div>
</nav>
<div class="row">
<div class="col s3 red">1</div>
<div class="col s9 indigo" style="height:100%">4</div>
</div>
first i don't see the reason why 4 is a little below 1. This bug resolves when i add a margin of 10 px to top of row, but the thing is that red menu bar should be colored and therefore i don't wan't any white space in between that.
The second question, that i am not sure about how to do that the correct way is that i want both blue and red to cover the entire height on the browser window. Is there anyway how to do the same in materialize , or if not please help me with how that is possible.
To set the height to full view add this CSS
.col.s3.red, .col.s9.indigo {
min-height: 100vh; /* use "vh" instead of % */
}
It will help setting the height to view port height.
These solutions work so long as the content in either of the div's does not overflow the browser window and cause it to scroll.
In order for both columns to fill 100% of the page height (not viewport height) I found this:
CSS: equal height columns
Add the following code to the parent div (row)
.flex {
display: flex;
flex-wrap: wrap;
min-height: 100vh; /*or use calc(100vh - header_height)*/
}
I solved this using:
.full-width {
height: 100%;
min-height: 1000px !important;
}
You need to use !important because .row .col has a min-height: 1px;
<div class="col s3 yellow lighten-4 full-width">
A
</div>
<div class="col s9 grey lighten-4 full-width">
B
</div>
This solution used 100% of the viewport's larger dimension.
.myColumnFormat {
min-height: 100vmax;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<div>
<h4>This solution uses Materialize</h4>
</div>
<div class="row">
<div class='col myColumnFormat blue s6'>
<ul>
<li>This column is blue</li>
<li>This column's background colour is full length</li>
</ul>
</div>
<div class='col green s5 offset-s1 '>
<ul>
<li>This column is green</li>
<li>This column's background colour ends at the end of this list</li>
</ul>
</div>
</div>
To get full height you can do following. jsfiddle
HTML
<nav class="blue darken-3">
<div class="nav-wrapper">
Chatter
<ul class="right hide-on-med-and-down">
<li><a nohref><i class="material-icons">search</i></a></li>
<li><a nohref><i class="material-icons">view_module</i></a></li>
<li><a nohref><i class="material-icons">refresh</i></a></li>
<li><a nohref><i class="material-icons">more_vert</i></a></li>
</ul>
</div>
</nav>
<div class="row">
<div class="col s3 red">1</div>
<div class="col s9 indigo">4</div>
</div>
jQuery
$(document).ready(function() {
window_size = $(window).height();
$('.col').height(window_size);
});
Second question, add this in your CSS-File:
div.col.s3.red {
min-height: 500px;
height: 100%;
}
div.col.s9.indigo {
min-height: 500px;
height: 100%;
}
It gives a height of 100% to the two elements, it should work in newer Browsers. For older Browser you could add min-height to it.
First Question, the nav elements have a line-height of 64px, you could reduce it as you like in your CSS-File:
.nav-wrapper {
line-height: 44px;
}
var resizeColumn = function () {
my_column_el.height($(window).height() - my_column_el.offset().top);
};
$(window).on('resize.column', _.debounce(resizeColumn, 300));
resizeColumn();
As with Bootstrap, most Materialize styling starts with a container. If the container is not 100% then child divs will not be either. This styling will start you off with 100% width and 100% height:
CSS
html, body {
min-height: 100vh;
margin: 0;
padding: 0;
}
.container {
min-height: 100vh;
width: 100%;
}
.content-wrapper-100vh {
min-height: 100vh;
}
Remove "width: 100%;" in the container css and it will be 70% wide (default).
HTML
<div class="container">
<div class="valign-wrapper content-wrapper-100vh">
<div class="row center-align">
<div class="col l12">
<div class="my-title">Centered/Middle Title</div>
</div>
</div>
</div>
</div>
I'm having trouble by creating a responsive footer that always stay on the bottom of the page. The code I'm actually using is this:
body
{
margin: 0 0 200px; //Same height of the footer
}
footer
{
position: absolute;
left: 0;
bottom: 0;
height: 200px;
width: 100%;
overflow: auto;
background-color: rgba(67, 191, 115, 0.95);
}
I use:
<div class='main-content'>
//Content
</div>
<footer>
//Footer content
</footer>
Well, the problem is if I resize the screen and the content is larger than the resolution the footer lets a white space, like this:
I am trying to solve this problem. If I use position: fixed the problem disappears, but I don't want the footer following the scroll. I think the problem is in the 100 percent width. The footer of this site, Stack Overflow, works as I need. If I resize the window the footer remains the same, no white space. How to achieve this? How to make the footer cover all the width without let white space even if the resolution is lower than the page like occurs here, in Stack Overflow?
Try this code....
CSS
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .credit {
margin: 20px 0;
}
HTML
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use the sticky footer with a fixed navbar if need be, too.</p>
</div>
</div><!-- Wrap Div end -->
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
This jsfiddle I am creating based on your html.
This is work as responsive, I am not seen any issue as you tell.
I think may be the issue with height:200px , just remove and check.
Still you have issue , update the jsfiddle.
You should indeed use fixed positioning. This is what we do in our apps, running on browsers and Android/iOS devices:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
margin: 0;
/*
This height just to show that the footer stays at the
bottom of the page even when scrolling all the way down.
*/
height:2000px;
}
footer
{
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 200px;
overflow: auto;
background-color: rgba(67, 191, 115, 0.95);
}
</style>
</head>
<body>
<div class='main-content'>
//Content
</div>
<footer>
//Footer content
</footer>
</body>
</html>
Of course, you are using HTML5 so this page will not work on older browsers (IE7, IE8).
I hope this helps :)
I like flexbox. CSS tricks - Guide to Flexbox
Try this:
main {
height: 95vh;
display: flex;
flex-flow: column wrap;
justify-content: space-around;
align-items: center; }
header,
footer { flex: 0 1 auto; }
article { flex: 10 1 auto; }
<main>
<header>Title Here</header>
<article>Main Article</article>
<footer>Copyright and Contact Me</footer>
</main>
Thanks to Galen Gidman https://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/ for this:
<header class="page-row">
<h1>Site Title</h1>
</header>
<main class="page-row page-row-expanded">
<p>Page content goes here.</p>
</main>
<footer class="page-row">
<p>Copyright, blah blah blah.</p>
</footer>
And the CSS:
html,
body {height: 100%;}
body {display: table; width: 100%;}
.page-row {display: table-row; height: 1px;}
.page-row-expanded {height: 100%;}
Galan: The only real caveat to this solution that I’ve encountered so far is the styling limitations present with elements using display: table-row. Often padding, margin, etc. don’t behave as expected. This is easy enough to work around by adding a or something inside the .page-row and styling that.
I'm not sure what the issue here is, but its frustrating the hell out of me. I have a header div, for the logo and links, a wrapper div for the main section, and then a footer. width is set to 100% for all, but for some reason there is an overflow of white space spilling over on the right side and on the bottom. And it does this funky thing where if I move my mouse to the white space below the footer the contact link in my header is selected!
Theirs a fair bit of html and css so I decided to just link you guys to a jfiddle, it will be easier to just show you the problem in action. notice how you can scroll to the right and there is white space, even though the wrapper has background color set to grey, header has background set to white, and footer has background set to grey. all have 100% widths as well.
There is even white space coming in below the footer for some reason.
I hope all this makes sense and thanks for your help. I'm sure its something silly and obvious but I'm still kind of new to this!
http://jsfiddle.net/46andtool/Q2d4K/2/
heres the main div css
/*body element*/
body {font-size: 100%; line-height: 1; max-width: 100%; font-family: 'Source Sans Pro', sans-serif; }
/*contains #main and #footer*/
#wrapper { width:100%; background-color:grey; border: none;}
#main { width:100%; margin: 0 auto; border: none;}/*main body of website, wrapped inside of the wrapper div*/
/*div that contains the banner and navigation*/
.header {width: 100%; margin: 0 auto; background-color: #FFFFFF; padding-bottom: 10px; margin-bottom: 10px;}
/*Logo*/
#banner {float: left; max-width: 100%; margin: 0; padding: 0;}
/*navigation*/
#w { max-width: 100%; background-color: #FFFFFF; margin: 0; padding: 0; }
and the html:
<body>
<div class="header">
<img id="banner" src="img/******.png" alt="*******">
<div id="w">
<nav>
<ul id="ddmenu">
<li>About
<ul>
<li>Our Mission</li>
<li>The Staff</li>
<li>History</li>
</ul>
</li>
<li>Services
<ul>
<li>*****</li>
<li>******</li>
<li>******</li>
</ul>
</li>
<li>Links
<ul>
<li>China</li>
<li>Japan</li>
<li>Canada</li>
<li>Australia</li>
<li>South America</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<div id="wrapper">
<div id="main">
<div id="innermain">
<h1>Latest News and Events</h1>
<h2>Welcome to !</h2>
<p>gsfdgdfgsdfgsdfg
</p>
<div id="linebreak"></div>
<p>gfdhgdfhfgh</p>
<br>
<p>hgdhfghgfh</p>
<br>
<p>gdhfgdhfghfgh</p>
<br>
</div>
<div id="rightside">
<h1>Where To Find Us</h1>
<div id="buildingpic"></div>
<div id="map_canvas"></div>
<p id="location">sadfasdfsadsdf<br> asdfsdfa<br> asdfdsfds<br> 555-3423</p>
</div>
</div>
</div>
<div id="footer">
Site design by <a class ="links" href="example#yahoo.com">fsgfdg</a></a> © <?php echo date('Y');?> All Rights Reserved
</div>
</body>
There are a couple things causing issues here.
Your body automatically comes with a margin, so it's going to overflow if you don't specifically set the margin:0px;
Your #footer had a width:100%; but it also had padding:10px. Those are combined, so you had width:100% + 10px of padding. Try to do something like what I provided, which is width:94%; and padding:10px 3%; so your width becomes 94% + 3% + 3% = 100%
Lastly, your #buildingpic element had width:300px which in this case was wider than the container it was in. You would be better off making it width:100% and height:auto; to automatically constraint to the proportions of it's container. In this case I set the max-width:100%;
http://jsfiddle.net/Q2d4K/4/
Also, you're going to have a hell of a time if you always use IDs. Try to use classes for elements so you can re-use them if need be, or at least not have issues with duplication or priority of selection.
I am using Bootstrap's Navbar and Bootsrap's grid to display a Navbar with a image immediately underneath the Navbar. However, for some reason there is whitespace between this Navbar and the image. When I use firebug to investigate the location of the whitespace, it looks like the Navbar is top-aligned within its containing . I have tried to fix this by using CSS to bottom-align the navbar, to no avail.
How can I eliminate this whitespace?
<!-- Top Navigation Bar -->
<div class="row" id="rowTopLinkNavBar">
<div class="span6 offset3" id="divTopLinkNavBar">
<div class="navbar" id="topLinkNavBar">
<div class="navbar-inner" style="font-size: 16px;">
<ul class="nav">
<li class="active">Home</li>
<li class="divider">PROJECTS</li>
<li class="divider">ABOUT US</li>
<li class="divider">THE TEAM</li>
<li class="divider">EVENTS</li>
<li class="divider">MEETINGS</li>
<li>RESOURCES</li>
</ul>
</div>
</div>
</div>
</div>
<!--Background Image-->
<div class="row" id="rowBackgroundImg">
<div class="span6 offset3" id="backgroundImg">
<!-- background image is set in CSS -->
</div>
</div>
Here is my desperate attempt at fixing this issue using CSS:
#backgroundImg
{
color: #ff0000;
background-color: #000000;
/*width: 709px;
height: 553px;*/
background: url('../images/someImage.jpg') no-repeat;
background-size: 100%;
height: 700px;
border-radius: 0px;
background-position: center;
vertical-align: top;
background-position: top;
}
#divTopLinkNavBar
{
vertical-align: bottom;
}
#topLinkNavBar
{
padding-bottom: 0px;
}
#rowBackgroundImg
{
padding-top: 0px;
}
.navbar
{
vertical-align: bottom;
}
You may want to override the margin-bottom: 20px from navbar :
.navbar {
margin-bottom: 0;
}
Something like that : http://jsfiddle.net/q4M2G/
(the !important is here just to override the style of the CDN version of bootstrap I'm using in the jsfiddle but you should not need to use it if your style correctly overrides bootstrap styles)
Why you put classes: span12 offset3 ?
Bootstrap has 12 columns default. so if you didn't changed it try to put:
span9 offset3 or just span12.