After using the code this way:
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<style type="text/css">
.container{
max-width:980px;
}
</style>
</head>
<body>
<div class="container" style="max-width:980px;">
...
</div>
</body>
</html>
I get the whole container going over 1100px
A better way to do this is
1)create your own less file as a main less file ( like bootstrap.less ).
2)Import all bootstrap less files you need. (in this case, you just need to import all responsive less files but responsive-1200px-min.less)
3)If you need to modify anything in original bootstrap less file, you just need to write your own less to overwrite bootstrap's less code. (Just remember to put your less code/file after #import {bootstrap's less file}; ).
#media (max-width:1200px)
#media (min-width: 979px)
Second way
use .container-fluid
.container-fluid {
margin-right: auto;
margin-left: auto;
max-width: 1600px; /* or 950px */
}
insert in your custom css
Try this
.container{
max-width:980px;
margin:0 auto;/*make it centered*/
}
Take following lines from variabless.less, put it to app.less and set your values.
#container-tablet: ((720px + #grid-gutter-width));
#container-desktop: ((940px + #grid-gutter-width));
#container-lg-desktop: ((1140px + #grid-gutter-width));
This should do the trick
.container{
max-width:980px !important;
}
Try this code
/* set a max-width for horizontal fluid layout and make it centered */
.container-fluid {
margin-right: auto;
margin-left: auto;
max-width: 1600px; /* or 950px */
}
Use this in your code it will really work for you.
Related
I have seemed to encounter an unknown space below the div pair.
I have used the bootstrap grid concept and made use of rows and columns to have 2 adjacent Divs.
Then I have used CSS to make the div fill the whole space of the screen but I seem to get unaccounted for white space below the divs.
I have already tried including an advanced CSS reset.
Here is the html :
#half_box_1 {
width: 50%;
height: 100vh;
background-color: #FFAEAB;
}
#half_box_2 {
width: 50%;
height: 100vh;
background-color: #FFC0FA;
}
#following_div {
height: 500px;
width: 100%;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Kshitij Dhyani</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="materialize.css">
<link rel="stylesheet" type="text/css" href="my_portfolio.css">
<!-- FONTS -->
</head>
<body>
<div class="row">
<div class="col-lg-6" id="half_box_1">asd</div>
<div class="col-lg-6"
id="half_box_2"></div>
</div>
<div id="following_div"></div>
</body>
</html>
I am unable to comprehend this unaccounted space.
Since you probably have noticed (by the comments), your code seems to work fine.
Your problem seems to be somewhere else in your CSS.
First, try to use the following CSS to see if it works:
* {
padding: 0 !important;
margin: 0 !important;
}
If that worked, you can delete it and you need to start debugging.
Open up Chrome DevTools and go to Sources -> Page and find your CSS file(s). Try to delete each CSS block one after the other. If there is no more space between, you may found out where the problem is.
this is default margin, Please add this code body{margin: 0;padding: 0;} in css
I'm trying to make it so that when users view my site on a mobile device (a max-width of 414px), a specific div (mobile-articles) is visible. However when viewed on desktop, the view should be hidden. I've tried the below, however my div doesn't seem to be visible on a mobile device (though it is hidden on desktop). How can I fix this? See code below:
Test.html
<style>
.mobile-articles {
visibility:hidden;
display: none;
}
#media (max-width: 414px) and (min-width: 367px) {
#viewport {
width: device-width;
}
}
#media screen and (max-width : 414px) {
.mobile-articles {
visibility:visible;
display: block;
}
}
</style>
<body>
<div class="mobile-articles"></div>
</body>
In order to use media queries in your css you need to include a meta tag inside <head> to set the device-width to the width.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
CSS Solution:
.mobile-articles {
display:none;
}
#media screen and (max-width:780px) {
.mobile-articles {
display:block;
}
}
JS Solution:
<script>
if (window.navigator.userAgent.match(/Android/i)||
window.navigator.userAgent.match(/iPhone/i)) {
document.getElementsByClassName('mobile-articles')[0].style.display = 'block';
}
else {
document.getElementsByClassName('mobile-articles')[0].style.display = 'none';
}
</script>
If still dont working I recomend you to delete the this code in CSS stylesheet
#media (max-width: 414px) and (min-width: 367px) {
#viewport {
width: device-width;
}
}
Anyway , if you want to simplify code , you could use Bootstrap, materialize , or any other framework as big as those
You should simply use bootstrap and its visibility classes which is for exactly you are trying to do.
https://www.tutorialspoint.com/bootstrap/bootstrap_responsive_utilities.htm
For your code; i think you can try specifying window size for large screens too. I mean first style for mobile articles class should be in a media query too.
if you use bootstrap you can do:
<div class="d-sm-block d-lg-none" >
So I'm using two media queries on my page:
<link rel="stylesheet" media="screen and (max-device-width: 1099px)" href="./src/css/narrow.css" />
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="./src/css/main.css" />
The main.css one loads by default, but when the browser is re-sized below 1100px, it simply loads no stylesheet, therefor the entire page renders no styling.
Anybody have any clue what I'm doing wrong? Also, isn't it possible to use media queries inside of "main.css"? So I can only alter certain elemnts based on browser width, instead of loading a whole new stylesheet? Thanks much guys :)
Yep you can do this all in the main stylesheet, so something like this:
#media only screen and (max-width: 1099px){
/* css here */
}
#media only screen and (min-width: 1100px){
/* css here */
}
Actually I also noticed you had max-device-width: on so this will only target ipads/iphones etc which is probably why you weren't seeing this stylesheet on the desktop
The alternative is to use Javascript/Jquery to detect the screen size and load a different stylesheet based on that screen size, but Adam's solution is probably better unless you need to separate your style sheets for a particular reason.
This article will give you all the information you need using jquery - http://css-tricks.com/resolution-specific-stylesheets/
You can also use multiple queries - I make a new one every time I fine a width that doesn't look quite right.
#media (max-width:319px) {
// styles
}
#media (min-width:320px) and (max-width:479px) {
// styles
}
#media (min-width:480px) and (max-width:479px) {
//styles
}
etc..., etc...
I'll also usually built the queries on each element that needs them. I find that when you put ALL your rules for the a media query in one section of your stylesheet things get confusing to maintain.
For example:
div.box {
width: 100%;
}
#media (...) {
width: 80%;
}
#media (...) {
width: 60%;
}
etc...
Then on another element that needs resizing I'll do the same thing:
div.otherbox {
width: 100%;
}
#media (...) {
width: 80%;
}
#media (...) {
width: 60%;
}
etc...
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.
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>