I've been reading the docs and comparing my code to Bootstrap's examples, but I cannot figure out why the navbar on my site drops down about 100px when I make my browser window smaller or view it on a phone.
http://warm-ocean-8133.herokuapp.com/
Here's my html in jade template format.
.navbar.navbar-fixed-top
.navbar-inner
.container
a.btn.btn-navbar(data-toggle="collapse",data-target=".nav-collapse")
span.icon-bar
span.icon-bar
span.icon-bar
a.brand(href='#home') Miles Matthias
.nav-collapse
ul.nav
li.active
a(href='#home') Home
li
a(href='#contact') Contact
The visual anomaly appears because you defined the top padding for the body element after including the bootstrap-responsive.css file, which means that the "responsive" styles are unable to override your padding:
<link href="/stylesheets/bootstrap.css" rel="stylesheet">
<link href="/stylesheets/bootstrap-responsive.css" rel="stylesheet">
<!-- ... some stuff -->
<style type="text/css">body {padding-top: 60px;}</style>
You want the padding to be used when the page is displayed at full width (so that your main content doesn't get displayed underneath the top navbar), but you want the "responsive" styles to override that padding when you shrink the browser width (or display the page on a mobile device).
So the fix is simple: define the top padding for the body element between your inclusion of bootstrap.css and bootstrap-responsive.css.
The Bootstrap samples are a great template to use to get started. The fluid layout site does it like this:
<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
You can use #media to override the body padding.
Like this:
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
}
#media (max-width: 979px) {
body {
padding-top: 0;
}
}
</style>
Related
I am building a website in asp.net, I have made a masterpage with a link tag to my css files. I made use of 1 global css file for every format of screen and 3 css files for small, medium and large screens.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Styles/style.css" media="all">
<link rel="stylesheet" type="text/css" href="Styles/small-style.css" media="all and (max-width:699px)">
<link rel="stylesheet" type="text/css" href="Styles/medium-style.css" media="all and (min-width:700px) and (max-width:1499px)">
<link rel="stylesheet" type="text/css" href="Styles/large-style.css" media="all and (min-width:1500px)">
For some reason in my content file the global css file (for every format) is getting used by the html elements. For example (style.css) this works for a div in my content page with class contactPage:
.contactPage {
margin-bottom: 140px;
}
Except for the 3 css files that make use of a min- and max-width, these are not used by the html elements in my content page (for some reason). For example (medium-style.css):
.contactPage {
background-image: url(../Images/ContactBackground.jpg);
background-size: 300px 500px;
background-repeat: no-repeat;
background-position: top right;
}
However in my master page these css links work file for all page sizes.
What I tried:
Adding a viewport in my content file.
Making use of <style></style>, this works but I don't want any of my style in my html.
Making a link element in my content page to the css files.
I hope someone could help me out.
Thank you in advance.
instead of your html doing the media query combine all 3 pages into one css and then separate them with something like
all css {
your css here
}
#media screen and (max-width: 699px){
css for max-width for 699{
your css here
}
#media screen and (min-width:1500px){
css for max-width for 1500{
your css here
}
i would let the media query in css handle it, not your html
My custom main.css can't change the font size or the location where's the text located at, but when I delete the bootstrap assigning line, it works.
I assume the bootstrap.css has already set the appearance of those attributes I want to change, so they take to effect from my main.css unless I delete the
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Here's how my head section looks like, I have read that I have to assign my custom main.css after bootstrap, here it is`
<title>For Testing Purposes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css">
Here is the HTML code of attributes I want to change`
<h1>Space</h1>
<section class="parallax">
<div class="parallax-inner">
<h2>Space</h2>
</div>
</section>
<h1>Space</h1>
And here is my main.css, which takes effect only when the bootstrap line is deleted.
.parallax {
background: url("http://s1.picswalls.com/wallpapers/2014/02/19/latest-space-wallpaper_110926700_30.jpg") center fixed;
background-size: 100% 100%;
}
.parallax-inner {
padding-top: 10%;
padding-bottom: 10%;
text-align: center;
font-size: 575%;
}
.h1 {
font-size: 575%;
}
I have tried !importnant tags too.
I am not a bootstrap expert, but .parallax and .parallax-inner sound as if these classes would be used for parallax effects in Bootstrap. So they are probably altered dynamically by a javascript, which also affects your own classes with the same name.
If possible, just rename your own classes and CSS rules. You can also add own classes as a second class to an element, like <div class="parallax my_class">...
To override a pre existing style use !important after your CSS rule. For example.
h4 {
font-size: 14px !important
}
The above rule will override any other font size assignment for h4
You have to be more specific if you want to bypass conflicts with bootstrap styles.For example, you could target .parallax div with its parent element.
In CSS, a period . denotes a class. If you want to work with the tags alone, simply put 'h1' instead of '.h1' in your css stylesheet.
.parallax {
background: url("http://s1.picswalls.com/wallpapers/2014/02/19/latest-space-wallpaper_110926700_30.jpg") center fixed;
background-size: 100% 100%;
}
.parallax-inner {
padding-top: 10%;
padding-bottom: 10%;
text-align: center;
font-size: 575%;
}
.h1 {
font-size: 575%;
}
I have a problem with my code. Because I am trying to create a responsive website using min and max width using the media queries. Some parts of my queries are fine but there is an element that doesn't read my CSS media query.
I have a navigation sidebar in the left side. And I want to resize it using media queries. But if I resized it. It doesn't read the min-width I include in the media query. When I check the code. only the color property is working. When I debug it using developer tools in Chrome. It read the CSS from the other CSS file named 'product.css' and not my 'responsive.css'.
What should I do?
Here's my simple CSS for responsive.css
#media screen and (max-width: 1603px) {
#searchhandler {
color: red;
min-width: 310px;
}
}
Here's the CSS from my product.css
#searchhandler {
width: 20%;
display:none;
min-width: 316px;
}
I am really a newbie in CSS that's why I am having a hard time with this part.
Ok I solved my problem. It is not the media query but the links for inluding the CSS file in my header.
My old code is like this
<link rel="stylesheet" type="text/css" href="./css/product.css" media="all" />
<link rel="stylesheet" type="text/css" href="./css/responsive.css" />
It should be
<link rel="stylesheet" type="text/css" href="./css/responsive.css" media="all" />
<link rel="stylesheet" type="text/css" href="./css/product.css" />
There are two columns (left and right) with float positioning: http://jsfiddle.net/GBa4r/
<style>
.container {width:200px;}
.right {float: right; width: 30%;}
.left {float: left; width: 70%;}
</style>
<div class="container">
<div class="right">2</div>
<div class="left">1</div>
</div>
For print styles I need to change column places like in this example http://jsfiddle.net/GBa4r/1/ (".left" column above ".right")
What css code I should use in
<link href="/css/print.css" media="print" type="text/css" rel="stylesheet" />
to do it without change html code?
Use CSS #media queries
#media print {
/*Styles goes here*/
}
Or use a print specific stylesheet using media="print"
<link type="text/css" rel="stylesheet" media="print" href="print_specific_sheet.css" />
Use a specific print stylesheet. You can do it with the media attribute on the link element:
<link rel="stylesheet" media="print" href="print.css">
Or you could do so from inside of the CSS file:
#media print {
/* print specific styles */
}
A print stylesheet works in much the same way as a regular stylesheet, except it only gets called up when the page is printed. To make it work, the following needs to be inserted into the top of every web page:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
The file, print.css is the print stylesheet, and the media="print" command means that this CSS file only gets called up when web pages are printed.
Use the following CSS.
.container {width:200px;}
.right {background-color: #eaeaea; width: 30%;position: absolute;
top: 18px;}
.left {background-color: #ccc; width: 70%; position: absolute;
top: 0%;}
Check out the following fiddle:
http://jsfiddle.net/siyakunde/GBa4r/5/
Add to parent container:
display: -webkit-box; -webkit-box-direction: reverse;
remove from children:
.right {float: right;}
.left {float: left;}
This was horizontal change.
If positioning is to be changed vertically as in,
http://jsfiddle.net/siyakunde/GBa4r/6/
then, add
-webkit-box-orient:vertical;
to parent.
When I use css for printing into a pdf for ex. content of my webpage it print more than I need like the header, footer, like of my webpage ,labels, the date ... etc which I don't want to print?!
Here is an example:
<html>
<body>
<img src="Snapshot_20120326.jpg"/>
<h1>Mezoo</h1>
<h2>The big member</h2>
<button onclick="window.print();">print</button>
<style media="print">
h1 ,img {
display: block;
}
h2, button{
display: none;
}
</style>
</body>
</html>
It'd probably be best to set #media print styles in a separate CSS stylesheet ...
So for example, to hide the header:
#media print {
.header, .hide { visibility: hidden }
}
You can learn more about media styling here: http://www.w3.org/TR/css3-mediaqueries/
You can use the media tag on a link.
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
The print css could then turn off visibility on things you don't want to see.