I'm building my first site with Twitter Bootstrap and experimenting with fluid layouts. I've set my container to be fluid, now the content inside takes up the full page width and adapts as I resize the browser.
The design I'm working on was created for a maximum width of ~950px.
I've checked variables.less and responsive.less, and the Bootstrap documentation; I can't quite work out how to make this happen.
I also tried adding the following to my style.css:
body {
max-width: 950px;
}
You don't have to modify bootstrap-responsive by removing #media (max-width:1200px) ...
My application has a max-width of 1600px. Here's how it worked for me:
Create bootstrap-custom.css - As much as possible, I don't want to override my original bootstrap css.
Inside bootstrap-custom.css, override the container-fluid by including this code:
Like this:
/* 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 */
}
Edit
A better way to do this is:
Create your own .less file as a main .less file ( like bootstrap.less ).
Import all bootstrap .less files you need. (in this case, you just need to Import all responsive .less files but responsive-1200px-min.less)
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 */ };).
Original
I have the same problem. This is how I fixed it.
Find the media query:
#media (max-width:1200px) ...
Remove it. (I mean the whole thing , not just #media (max-width:1200px))
Since the default width of Bootstrap is 940px, you don't need to do anything.
If you want to have your own max-width, just modify the css rule in the media query that matches your desired width.
In responsive.less, you can comment out the line that imports responsive-1200px-min.less.
// Large desktops
#import "responsive-1200px-min.less";
Like so:
// Large desktops
// #import "responsive-1200px-min.less";
Unfortunately none of the above solved the problem for me.
I didn't want to edit the bootstrap-responsive.css so I went the easy way:
Create a css with priority over bootstrap-responsive.css
Copy all the content of the #media (min-width: 768px) and (max-width: 979px) (line 461 with latest bootstrap version 2.3.1 as of today)
Paste it in your high priority css
In your css, put #media (min-width: 979px) in the place where it said #media (min-width: 768px) and (max-width: 979px) before. This sets the from 768 to 979 style to everything above 768.
That's it. It's not optimal, you will have duplicated css, but it works 100% perfect!
I don't know if this was pointed out here. The settings for .container width have to be set on the Bootstrap website. I personally did not have to edit or touch anything within CSS files to tune my .container size which is 1600px. Under Customize tab, there are three sections responsible for media and the responsiveness of the web:
Media queries breakpoints
Grid system
Container sizes
Besides Media queries breakpoints, which I believe most people refer to, I've also changed #container-desktop to (1130px + #grid-gutter-width) and #container-large-desktop to (1530px + #grid-gutter-width). Now, the .container changes its width if my browser is scaled up to ~1600px and ~1200px. Hope it can help.
Related
I have created a responsive website using Swiper. I have used #media queries in my css to fit different screen size and orientation.
Initially, I have 1 main css, 1 landscape css and 1 vertical css. I imported two orientation css into main css. Only main css is in html file. The website works fine with all screen sizes. The css snippet regarding the media is as below:
#media screen and (orientation:landscape) and (min-width:700px) {
#media screen and (orientation:landscape) and (min-aspect-ratio:16/10) {
#media screen and (orientation:portrait)
Then I read about not using import for css so I cat all .css into one file. I also deleted the two #import lines. Then the website does not work properly. Specifically, all elements on small screens return to normal size. I checked the css structure: these elements lose their style enclosed in #media {} thus inherent from their parent css.
The fiddle with all the code is here. It's not working because it supposes to grab local image files.
The working website with separate css files is this. It's on Github so you can see the source files easily.
I am really new to css so this might be due a stupid mistake..
Use these media screen for tablet and mobile if you are not importing hopefully it will help Thank's
beside your fiddle shows this on top }//]]> i dont know why might be js issue or some text in body
#media only screen and (max-width: 1024px){}
#media only screen and (max-width: 768px){}
#media only screen and (max-width: 767px){}
I'm relatively new to bootstrap and doing my best to get up to speed. I understand that rather than edit that 6700 line bootstrap.css file, it makes more sense to create your own css file of changes and put that under the main bootstrap.css file, overriding what was in the main one.
However, I have an issue with media queries. For example, I want the menu to collapse at a larger resolution than what is specified in bootstrap.css, which includes something like this:
#media (min-width: 767px) {
[ lots of things to collapse the menu ]
}
So in my changes css file, I copied the same code, but changed the min-width to 992px. The problem is that this doesn't cancel out the directives made in the bootstrap.css file. It just does them again at a different resolution.
The only thing I can think of to resolve this is to copy that code from the original file, leave the min-width resolution at 767, and then for each instruction through the entire block of code, determine what the default property should be and set it back to that. This would be a ton of work, and could be very prone to mistakes.
My only solution was to edit the main bootstrap.css file and comment out that code. I didn't like editing it, but I don't see any other way around this. IS there another way? I'm not looking for help specifically on collapsing the menu. I'm more looking for css concept help.
If you really want to override Bootstrap style, you'll have to override also what is specified by Bootstrap CSS file for a width between 767px and 992px.
#media (min-width: 767px) and (max-width: 991px){
/* Undo here what was specified by Bootstrap file for screens larger than 767px and you don't want to apply */
}
I created a simple page with Axure in 2 versions (basically 2 adaptive views: base and 768 and below). When I generate the html, it works fine and follows the adaptive views. But this seems to work only with javascript, is there a way to deal with/generate the adaptive views in css? This could help me later on integrating the Axure generated html and css into my responsive design based on bootstrap. Thank you.
Pretty sure you're asking about responsiveness according to screen size. Bootstrap is built around these principles and the responsiveness is done purely through CSS using #media queries. All CSS starts on the smallest possible screen and then you can adjust your CSS to change as the screen size gets larger by placing # media queries at the bottom of your stylesheet. They are as follows:
#media (min-width:768px) {
This is where your CSS for anything above 768px goes
}
#media (min-width:992px) {
This is where your CSS for anything above 992px goes
}
#media (min-width:1200px) {
This is where your CSS for anything above 1200px goes
}
You can also use max-width in media queries
Now am using Bootstrap # for an Web Application.
My Application should be Same as in REQUIREMENT
Since am Applied Bootstrap, when i shrink the screen it shows as Responsive, But I really NOT NEEDED.
I need the Sticky Body Content. As Same in NEEDED DEMO
I am sorry if I not understand your question correctly. but you are going to make your website become not Responsive? Then one of the solution that I can suggest to you is to overwrite or reset some bootstrap.css function with your custom css, especially
#media (min-width:somepx){width:your_desired px} with your own liking.
for example this bootstrap css default will define the container responsive size to 750px in case the screen is 768px:
#media (min-width: 768px) {
.container {
width: 750px;
}
for more information, you can read the information from the bootstrap link
I saw this page http://demo.smartaddons.com/templates/joomla3/sj-joomla3/ and was wondering how to do the same footer, when you decrease the size of the screen, the elements remain on top of one another.
I looked at the source, but did not understand me.
I do not want to use Joomla, I do pure CSS and HTML.
tks
The footer you are talking about mixes several css properties. But the most imporant to get the "responsive effect" are floats and media queries
You will find inforamtion about media queries here and float here
This is called a responsive page.
Using CSS3, you can set limits to the page width. And if the page reaches this limit, the style changes to accommodate the new size. In the example that you showed, there is a limit right where the screen reaches 1200px in widht and another one when it's in 979px and below.
you can set this by declaring this in your CSS:
#media (min-width: 1200px) {
/* Your code here */
}
#media (min-width: 979px) {
/* Your code here */
}