I created a web page using the bootstrap grid.
This page is rendered perfectly, as expected, when I just open it with a browser.
The container in bootstrap is smaller than the screen, everything is perfect.
BUT, if I render the exact same page as an application.html.erb layout in rails, it always send this message to the browser: #media (min-width: 1200px). This makes my page become a bit bigger than my screen. The rest is fine. Bootstrap works but the container width is too big! In the plain page it is 960px, which is perfect!
Why?
I don't want this to happen! It is really weird. I read some posts where people say it happened to them, but I have the two pages side by side and "inspect element" shows #media (min-width: 1200px) in the css of the "row" class in the rails page and nothing in the other!
I am totally not willing to hack the bootstrap css. I would just like to figure out what is happening and fix it ! I would really like to use it as a stylesheet and not as a gem...
thanks so much in advance!
P.S.:
In rails, I copied the bootstrap folder in my /assets/stylesheets/ directory
How about adding your own style in the file 'bootstrap_and_overrides.css.less' (or any other you have)?
In my own CSS, I have this:
.container {
width: 960px;
}
and the problem is solved. :)
Maybe the answers to my questions regarding Bootstrap & Rails provide you with some insight:
How to access Bootstrap Files individually
How to pass Bootstrap-Variables in Rails
Related
Background
I've built a responsive website template. I've chosen to use Bootstrap 2.3.2 because it needs to work in IE7+ and be suitable for mobile devices. I've used respond.js and html5shiv.js so that it will work in IE.
Problem
The site works beautifully in Chrome and Firefox. And it displays well in IE8. However in IE8 it's incredibly slow. Even after the page has finished loading the browser freezes up if I try to scroll down or click on something. It looks great but the slow response time makes it virtually unusable.
Cause of problem
I've identified that Bootstrap.min.css is the cause. When I remove bootstrap.min.css from the page and leave everything else the same, the styles don't work but the page loads quickly and it's very quick to scroll up and down and click on buttons.
I think (or rather I hope!) that the cause is not Bootstrap but rather because I'm using the responsive elements of Bootstrap (e.g. row-fluid). I'd like to keep the site responsive for all non-IE users, but I'd like to try making all widths fixed for IE8 users and below.
Attempts to fix
I've tried overriding the percentage widths in IE by creating a conditional IE stylesheet. However it doesn't appear to be possible to override the media queries, even using !important (example below).
HTML
<div class="row-fluid">
<div class="span10 width7">
</div>
</div>
Bootstrap
This is an example of what I've been trying to override.
#media (min-width: 1200px)
.row-fluid .span10 {
width: 40.92827004219409%;
}
CSS to override Bootstrap
The code below is not able to override the bootstrap css above.
.row-fluid .span10.width7{
width: 485px !important;
}
Question
Has anyone got any suggestions about how I might adapt my template so that it continues to be responsive for non-IE users but has fixed widths for IE8 and below?
Many thanks,
Katie
I'm building a html website using foundation.zurb 4 framework and now I'm having an issue on making the nav bar work on IE8. I kind of manage to make everything work on IE8 except that nav bar. I'm using a separate css file for the nav bar menu and another one for the IE8 tweaks. All the files can be found here.
I'd like to apologise the fact that the code is quite long and hope my request is not a bit too much to ask. I hope someone could help me as I'm getting a bit desperate now :(
Update: See it in action here It doesn't need to be responsive on IE8 I just want it to be static ;)
Media Queries - Responsive CSS3 is not supported for ie8 or less.
You are using this:
#media only screen and (min-width: 58.75em)
.top-bar .toggle-topbar {
display: none;
}
IE8 is like..."WTFISTHIS?"
Meaning it tries doing it but it just doesn't understand going back and forth
There is this plugin:
https://github.com/scottjehl/Respond
If you really need to support it but my answer is to let ie8 be static like a regular desktop version.
I am creating a website and I am trying to disable the responsive design feature. When I resize my browser, a few things get jumbled up, and I am not experienced with responsive design coding. Here is the link to my website
http://www.jiddrs.com
There is no simple answer to this, especially without knowing the code. It looks like the CSS for the search bar is out of place. Wordpress is a CMS that uses PHP to deliver content from the server. It compiles on a long running list of conditional statements that serve up content as needed.
Responsive CSS is completed by media queries. There's likely one stylesheet inside of your theme's folder labeled responsive.css or something similar.
Media queries look like this
#media screen and (max-width:640px) {
.classChange { style }
}
The Twitter Bootstrap 2.0-wip branch on GitHub includes a new responsive layout system. It's great for apps that need that level of responsiveness, but I'm developing a web-only app that needs to have a completely fixed layout.
Is there any easy way to override Bootstrap's responsive layout?
You can see it in action by cloning their repo, branching to 2.0-wip, and opening docs/scaffolding.html in your browser.
Thanks in advance!
Note, in 2.0.1+ the responsiveness has been moved to its own file, so it is turned off by default. To turn it on you include bootstrap-responsive.css or responsive.less.
http://twitter.github.com/bootstrap/scaffolding.html#responsive
Just remove the #media queries found in the bootstrap.css file on line 2684. That should eliminate all of the responsive qualities and just leave the standard container width intact.
#media (min-width: 768px) and (max-width: 940px) { ..... }
Just compile your own custom bootstrap on http://twitter.github.com/bootstrap/customize.html, unticking the responsive features.
Alternatively you can include following file from BootstrapCDN: http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap.min.css
I have a website that will be loaded in a web frame of an iPad app, so I have created a separate CSS file for the iPad, which is automatically loaded by a user agent call. Nothing too difficult here.
The problem is that 2 divs are not responding to the display:none CSS. The sidebar and the footer are still showing, despite being specifically called in the CSS just the same as all of the other elements, which are hidden correctly in Safari on the iPad.
www.themonitorgroup.com/disclaimer.html is a good page to illustrate this issue.
www.themonitorgroup.com/css/ipad.css is the specific CSS file for the ipad.
I assume there is something stupid simple I am missing. Please let me know if you can find anything. Thanks so much in advance.
Validators are your friend. You're missing a closing brace here:
#mainnav {
display: none;
And you have #sidebar rather than .sidebar in the style sheet.